{"id":33781,"date":"2023-01-29T13:15:55","date_gmt":"2023-01-29T13:15:55","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=features&#038;p=33781"},"modified":"2024-07-25T11:24:24","modified_gmt":"2024-07-25T11:24:24","slug":"ajax-search-results-area-overview","status":"publish","type":"features","link":"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/","title":{"rendered":"AJAX Search Results Area"},"content":{"rendered":"\n<p>The <strong>Results Area<\/strong> is the section displayed below the search bar (<strong>Ajax Search <\/strong>widget\/block\/element of <a href=\"https:\/\/crocoblock.com\/plugins\/jetsearch\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetSearch<\/em><\/a>). The settings allow you to customize the search results appearance, including the results area dimensions and texts. Keep in mind that the search results are not case-sensitive.<\/p>\n\n\n\n<p>The <strong>Ajax Search<\/strong> widget\/block\/element can also be added to any desired page\/template on the site. Read more about <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-add-an-ajax-search-to-websites-header-with-jetsearch\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add AJAX Search to the Website Header<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ajax-search-results-area-in-elementor\"><strong>AJAX Search Results Area in Elementor<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>One should enter a page where the <strong>Ajax Search<\/strong> widget is placed or is meant to be placed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"results-area-tab\">Results Area tab<\/h3>\n\n\n\n<p>Once this widget is added, one should open the <strong>Results Area <\/strong>tab to customize its settings. Among the available customizations are:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/the-first-part-of-the-results-area-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/the-first-part-of-the-results-area-settings-1024x618.webp\" alt=\"the first part of the results area settings\" class=\"wp-image-45044\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/the-first-part-of-the-results-area-settings-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/the-first-part-of-the-results-area-settings-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/the-first-part-of-the-results-area-settings-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/the-first-part-of-the-results-area-settings-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/the-first-part-of-the-results-area-settings-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/the-first-part-of-the-results-area-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Listing <\/strong>\u2014 an option available if the <a href=\"https:\/\/crocoblock.com\/plugins\/jetengine\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetEngine<\/em><\/a><em> <\/em>plugin is installed and activated. It allows the selection of a <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/listing-template-in-elementor-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">listing<\/a> that will serve as a template for the search results. More information about this feature can be found in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-set-a-listing-template-for-live-search-results-area\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Set a Listing Template for Live Search Results Area<\/a> tutorial;<\/li>\n\n\n\n<li><strong>Results Area Width<\/strong> \u2014 a drop-down list with three options that can be used to narrow the search results area: \u201cby Search Form,\u201d \u201cby Input Box and Categories List,\u201d and \u201cCustom.\u201d If selected, the \u201cCustom\u201d setting adds the <strong>Custom Width <\/strong>field where the results area width can be specified in pixels and results alignment, and also the <strong>Custom Position <\/strong>field where the exact position of the custom search results area can be specified;&nbsp;<\/li>\n\n\n\n<li><strong>Columns Number <\/strong>\u2014 a drop-down list where the number of columns can be defined;<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/highlight-searched-text-and-show-post-thumbnail-features.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/highlight-searched-text-and-show-post-thumbnail-features-1024x618.webp\" alt=\"highlight searched text and show post thumbnail features\" class=\"wp-image-45045\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/highlight-searched-text-and-show-post-thumbnail-features-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/highlight-searched-text-and-show-post-thumbnail-features-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/highlight-searched-text-and-show-post-thumbnail-features-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/highlight-searched-text-and-show-post-thumbnail-features-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/highlight-searched-text-and-show-post-thumbnail-features-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/highlight-searched-text-and-show-post-thumbnail-features.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Highlight Searched Text <\/strong>\u2014 a<strong> <\/strong>toggle that, if enabled, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetsearch-how-to-highlight-searched-text-in-results-area\/\" target=\"_blank\" rel=\"noreferrer noopener\">highlights the searched text<\/a> (i.e., the searched text \u201cPoland\u201d is highlighted in yellow in the image below);<\/li>\n\n\n\n<li><strong>Show Post Thumbnail<\/strong><em> <\/em>\u2014 a toggle enabled by default that allows including\/excluding the thumbnails of the posts. Besides, if enabled, this toggle displays the following settings:\n<ul>\n<li><strong>Thumbnail Size<\/strong> \u2014 a drop-down menu to specify the thumbnail size;&nbsp;<\/li>\n\n\n\n<li><strong>Thumbnail Placeholder <\/strong>\u2014 a field that allows one to upload or choose a file from the library;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/post-content-source-section.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/post-content-source-section-1024x618.webp\" alt=\"post content source section\" class=\"wp-image-45046\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/post-content-source-section-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/post-content-source-section-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/post-content-source-section-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/post-content-source-section-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/post-content-source-section-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/post-content-source-section.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Post Content Source<\/strong> \u2014 a drop-down menu with three options to narrow the search: \u201cPost Content,\u201d \u201cPost Excerpt,\u201d and \u201cCustom Field\u201d;&nbsp;<\/li>\n\n\n\n<li><strong>Post Content Length<\/strong> \u2014 a field where the length (in pixels) of search results can be specified. The \u201c0\u201d value in this field means there will be no content displayed;<\/li>\n\n\n\n<li><strong>Show Product Price<\/strong> \u2014 a toggle that, if enabled, shows the product price next to the displayed result items;<\/li>\n\n\n\n<li><strong>Show Product Rating<\/strong> \u2014 a toggle that, if enabled, shows the product rating next to the displayed result items;<\/li>\n\n\n\n<li><strong>Show Add to Cart Button <\/strong>\u2014 a toggle that, if enabled, shows the \u201c<strong>Add to Cart<\/strong>\u201d button next to the displayed result items.<\/li>\n<\/ul>\n\n\n\n<p>The <strong>Show Product Price<\/strong>, <strong>Show Product Rating<\/strong>,<strong> <\/strong>and <strong>Show Add to Cart Button<\/strong> toggles are must-haves for the e-shops to show prices and the product\u2019s rating. More information can be found in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-customize-the-content-shown-in-the-search-results-using-jetsearch\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Customize the Content Shown in the Search Results<\/a> tutorial.<\/p>\n\n\n\n<p>The following fields<strong> <\/strong>manage the search result generalized settings:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-results-counter-section.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-results-counter-section-1024x618.webp\" alt=\"show results counter section\" class=\"wp-image-45047\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-results-counter-section-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-results-counter-section-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-results-counter-section-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-results-counter-section-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-results-counter-section-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-results-counter-section.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Show Results Counter<\/strong> \u2014 a toggle that is enabled by default; it shows the total number of the matched results. If enabled, it shows the <strong>Result Counter Text<\/strong> field where the text to display can be changed if desired (i.e., we left the default \u201cResults\u201d text in the image below);<\/li>\n\n\n\n<li><strong>Show All Results Button<\/strong> \u2014 a toggle that is enabled by default; it shows the <strong>All Results Button Text<\/strong> field where the text to display in the button can be changed if desired (i.e., we left the default \u201cSee all results\u201d text in the image below);<\/li>\n\n\n\n<li><strong>Open Results in New Tab<\/strong> \u2014 a toggle that, if enabled, opens the results in a new tab;<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/results-navigation-section-and-results.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/results-navigation-section-and-results-1024x618.webp\" alt=\"results navigation section and results\" class=\"wp-image-45048\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/results-navigation-section-and-results-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/results-navigation-section-and-results-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/results-navigation-section-and-results-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/results-navigation-section-and-results-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/results-navigation-section-and-results-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/results-navigation-section-and-results.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Bullet Pagination <\/strong>\u2014 a drop-down menu allowing the display of the bullet pagination either in the header, footer, or both header and footer of the results area, or hide it. The example can be checked in the picture below;<\/li>\n\n\n\n<li><strong>Number Pagination <\/strong>\u2014 a drop-down menu allowing the display of the number pagination either in the header, footer, or both header and footer of the results area, or hide it. The example can be checked in the picture below;<\/li>\n\n\n\n<li><strong>Navigation Arrows <\/strong>\u2014 a drop-down menu allowing the display of the navigation arrows either in the header, footer, or both header and footer of the results area, or hide it. The example can be checked in the picture below;<\/li>\n\n\n\n<li><strong>Navigation Arrows Type<\/strong> \u2014 a drop-down menu allowing one to pick the type of navigation arrows displayed in the results area.<\/li>\n<\/ul>\n\n\n\n<p>Read <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-establish-pagination-and-navigation-for-the-search-results-in-jetsearch\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Set Pagination and Navigation for the Search Results<\/a> in this tutorial.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"search-suggestions-tab\">Search Suggestions tab<\/h3>\n\n\n\n<p>Except for the general results area, one can customize the <strong>Search Suggestions<\/strong> tab.<\/p>\n\n\n\n<p>There are two toggles presented in this tab. If one activates the first <strong>Save User Searches <\/strong>toggle, user searches made with the current <strong>Ajax Search <\/strong>widget will be saved to the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetsearch-search-suggestions-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Suggestions <\/strong>tab<\/a> of the <strong>JetSearch <\/strong>settings.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">The number of saved search requests depends on the <strong>Limit suggestions saved per user<\/strong> field in the <strong>JetSearch<\/strong> settings. If it is disabled, only 5 searches will be saved. But if you have this field activated and change the value in the <strong>Set the limits<\/strong> field, the maximum amount will be set to this value.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/save-user-searches-toggle-activated-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/save-user-searches-toggle-activated-1-1024x618.webp\" alt=\"save user searches toggle activated\" class=\"wp-image-45050\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/save-user-searches-toggle-activated-1-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/save-user-searches-toggle-activated-1-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/save-user-searches-toggle-activated-1-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/save-user-searches-toggle-activated-1-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/save-user-searches-toggle-activated-1-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/save-user-searches-toggle-activated-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The link below the <strong>Save User Searches <\/strong>toggle leads to the mentioned directory, where one can customize and add new search suggestions.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/jetsearch-suggestions-page.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/jetsearch-suggestions-page-1024x640.webp\" alt=\"jetsearch suggestions page\" class=\"wp-image-44272\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/jetsearch-suggestions-page-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/jetsearch-suggestions-page-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/jetsearch-suggestions-page-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/jetsearch-suggestions-page-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/jetsearch-suggestions-page-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/jetsearch-suggestions-page.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Returning to Elementor, one can also activate the <strong>Show Search Suggestions <\/strong>toggle. It will make the following settings active:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-search-suggestions-toggle-activated.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-search-suggestions-toggle-activated-1024x618.webp\" alt=\"show search suggestions toggle activated\" class=\"wp-image-45051\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-search-suggestions-toggle-activated-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-search-suggestions-toggle-activated-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-search-suggestions-toggle-activated-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-search-suggestions-toggle-activated-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-search-suggestions-toggle-activated-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/show-search-suggestions-toggle-activated.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Suggestions Source <\/strong>\u2014 a drop-down menu that allows defining the source of the displayed suggestions. It has two options available: \u201cPopular searches\u201d and \u201cUser searches.\u201d The \u201cPopular searches\u201d are those that users search for the most on the website, and the \u201cUser searches\u201d are the last searches by the current user;<\/li>\n\n\n\n<li><strong>Max Suggestions Number <\/strong>\u2014 a limit to the suggestions displayed. The maximum allowed value in this field is \u201c20\u201d;<\/li>\n\n\n\n<li><strong>Suggestions Position <\/strong>\u2014 a drop-down menu with the available suggestion positions options: \u201cUnder the form\u201d and \u201cInside search results area,\u201d correspondingly;<\/li>\n\n\n\n<li><strong>Suggestions title <\/strong>\u2014 a title that will be shown before the suggestions.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ajax-search-results-area-in-gutenberg\"><strong>AJAX Search Results Area in Gutenberg<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>To customize the <strong>Ajax Search Results Area <\/strong>in the Block Editor<em>, <\/em>the <strong>Ajax Search<\/strong> block should be placed on the needed page.&nbsp;<\/p>\n\n\n\n<p>The settings for this block are the same as in the <a href=\"#ajax-search-results-area-in-elementor\">Elementor editor<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-block-in-gutenberg-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-block-in-gutenberg-1-1024x618.webp\" alt=\"ajax search block in gutenberg\" class=\"wp-image-45052\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-block-in-gutenberg-1-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-block-in-gutenberg-1-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-block-in-gutenberg-1-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-block-in-gutenberg-1-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-block-in-gutenberg-1-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-block-in-gutenberg-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ajax-search-results-area-in-bricks\">Ajax Search Results Area in Bricks<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>To customize the <strong>Ajax Search Results Area <\/strong>in Bricks<em>, <\/em>the <strong>Ajax Search<\/strong> element should be placed on the needed page.&nbsp;<\/p>\n\n\n\n<p>The settings for this element are the same as in the <a href=\"#ajax-search-results-area-in-elementor\">Elementor editor<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-element-in-bricks.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-element-in-bricks-1024x618.webp\" alt=\"ajax search element in bricks\" class=\"wp-image-45053\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-element-in-bricks-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-element-in-bricks-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-element-in-bricks-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-element-in-bricks-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-element-in-bricks-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/ajax-search-element-in-bricks.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ajax-search-results-area-on-the-front-end\">Ajax Search Results Area on the Front End<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>After the result in the selected editor is saved, the result can be checked on the front end.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/ajax-search-on-the-front-end.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/ajax-search-on-the-front-end-1024x640.webp\" alt=\"ajax search on the front end\" class=\"wp-image-44299\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/ajax-search-on-the-front-end-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/ajax-search-on-the-front-end-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/ajax-search-on-the-front-end-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/ajax-search-on-the-front-end-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/ajax-search-on-the-front-end-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/ajax-search-on-the-front-end.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>If the search request is put in the search bar, the results preview is now displayed below the search bar.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/search-results-area-on-the-front-end.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/search-results-area-on-the-front-end-1024x640.webp\" alt=\"search results area on the front end\" class=\"wp-image-44300\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/search-results-area-on-the-front-end-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/search-results-area-on-the-front-end-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/search-results-area-on-the-front-end-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/search-results-area-on-the-front-end-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/search-results-area-on-the-front-end-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/05\/search-results-area-on-the-front-end.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>That\u2019s all; now you know how to customize the<strong> <\/strong>search results area of the <strong>Ajax Search <\/strong>widget\/block\/element with the <em>JetSearch <\/em>plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Read about the AJAX search area customization settings for the JetSearch plugin&#8217;s Ajax Search widget\/block\/element.<\/p>\n","protected":false},"author":12,"template":"","format":"standard","builder-category":[],"feature-category":[554],"article-category":[431],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>AJAX Search Results Area Overview \u2014 JetSearch | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to customize the search results area for the JetSearch plugin\u2019s AJAX Search widget\/block\/element in WordPress. Discover its general settings and main features for your WordPress site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AJAX Search Results Area Overview \u2014 JetSearch | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to customize the search results area for the JetSearch plugin\u2019s AJAX Search widget\/block\/element in WordPress. Discover its general settings and main features for your WordPress site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-25T11:24:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/the-first-part-of-the-results-area-settings-1024x618.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/\",\"name\":\"AJAX Search Results Area Overview \u2014 JetSearch | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-01-29T13:15:55+00:00\",\"dateModified\":\"2024-07-25T11:24:24+00:00\",\"description\":\"Learn how to customize the search results area for the JetSearch plugin\u2019s AJAX Search widget\/block\/element in WordPress. Discover its general settings and main features for your WordPress site.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Features\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"AJAX Search Results Area\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AJAX Search Results Area Overview \u2014 JetSearch | Crocoblock","description":"Learn how to customize the search results area for the JetSearch plugin\u2019s AJAX Search widget\/block\/element in WordPress. Discover its general settings and main features for your WordPress site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/","og_locale":"en_US","og_type":"article","og_title":"AJAX Search Results Area Overview \u2014 JetSearch | Crocoblock","og_description":"Learn how to customize the search results area for the JetSearch plugin\u2019s AJAX Search widget\/block\/element in WordPress. Discover its general settings and main features for your WordPress site.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/","og_site_name":"Help Center","article_modified_time":"2024-07-25T11:24:24+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/07\/the-first-part-of-the-results-area-settings-1024x618.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/","name":"AJAX Search Results Area Overview \u2014 JetSearch | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-01-29T13:15:55+00:00","dateModified":"2024-07-25T11:24:24+00:00","description":"Learn how to customize the search results area for the JetSearch plugin\u2019s AJAX Search widget\/block\/element in WordPress. Discover its general settings and main features for your WordPress site.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/ajax-search-results-area-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Features","item":"https:\/\/crocoblock.com\/knowledge-base\/features\/"},{"@type":"ListItem","position":3,"name":"AJAX Search Results Area"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/features\/33781"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/features"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/features"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/12"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=33781"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=33781"},{"taxonomy":"feature-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/feature-category?post=33781"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=33781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}