{"id":44237,"date":"2024-05-17T07:58:13","date_gmt":"2024-05-17T07:58:13","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=44237"},"modified":"2026-02-24T15:32:24","modified_gmt":"2026-02-24T15:32:24","slug":"how-to-show-users-search-suggestions","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-show-users-search-suggestions\/","title":{"rendered":"How to Show User’s Search Suggestions"},"content":{"rendered":"\n

With the Ajax Search <\/strong>widget\/block\/element, you can show search suggestions below the input area or inside the search results window. These can represent the most searchable requests on the website or the ones the last current user searched for. Or, you can also add the suggestions manually in the settings.<\/p>\n\n\n\n

Now, let\u2019s find out how to adjust the search suggestions section.<\/p>\n\n\n\n

Add Ajax Search to the Page\/Template<\/h2>\n\n\n\n
\n

Proceed to the page or template where the Ajax Search <\/strong>widget\/block\/element<\/a> will be displayed.<\/p>\n\n\n\n

For instance, we will work with the header template<\/a> built with JetThemeCore<\/em><\/a> <\/em>in the Elementor Page Builder. However, you can also recreate the following use case with another needed page or template not only in Elementor but also in the Block Editor or Bricks Builder.<\/p>\n\n\n\n

So, we go to WordPress Dashboard > Crocoblock > Theme Builder<\/em><\/strong>. Check more information about the JetThemeCore Dashboard Overview<\/strong><\/a>.<\/p>\n\n\n\n

Here, we find the page template for the entire website and push the \u201cthree dots<\/strong>\u201d button next to the header attached to this template.<\/p>\n\n\n\n

Then, we press the \u201cEdit content<\/strong>\u201d button in the opened section.<\/p>\n\n\n\n

\"edit<\/a><\/div>\n\n\n\n

The builder is open right away. Now, as we have the header pre-built, we just search for the Ajax Search <\/strong>widget and put it in the desired area.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

You can recreate the described use case with the Block Editor (Gutenberg) or Bricks Builder. The settings for the Ajax Search<\/strong> are the same in all available builders.<\/p><\/div><\/div>\n\n\n\n

Adjust the Search Form<\/strong><\/a>, Search Query<\/strong><\/a>, <\/strong>Results Area<\/strong><\/a>, and Custom Fields<\/strong><\/a> <\/strong>tabs according to your needs. <\/p>\n\n\n\n

For instance, we have set the Source <\/strong>of the search in the Search Query <\/strong>tab.<\/p>\n\n\n\n

\"search<\/a><\/div>\n\n\n\n

Open the Search Suggestions<\/a> <\/strong>tab.\u00a0<\/p>\n\n\n\n

Here, you can activate the Save User Searches <\/strong>toggle, which will save all the searches made via the current Ajax Search <\/strong>widget.<\/p>\n\n\n\n

When this toggle is activated, you can manage the search suggestions by following the link below the toggle.<\/p>\n\n\n\n

\"save<\/a><\/div>\n\n\n\n

If the link is followed, the Suggestions <\/strong>directory of the JetSearch <\/em>settings will be opened.<\/p>\n\n\n\n

Here, you can manage or add new search suggestions manually and prioritize them (by Weight <\/strong>value) to be displayed in the search suggestions next to the Ajax Search<\/strong>. Read more about this page in the Search Suggestions Overview<\/strong><\/a>.<\/p>\n\n\n\n

So, if the Save User Searches <\/strong>toggle is activated in the Ajax Search <\/strong>widget, the search requests will be saved and displayed on this page.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

The number of saved search requests depends on the Limit suggestions saved per user<\/strong> field in the 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 Set the limits<\/strong> field, the maximum amount will be set to this value.<\/p><\/div><\/div>\n\n\n\n

\"suggestions<\/a><\/div>\n\n\n\n

Returning to Elementor, we also activate the Show Search Suggestions <\/strong>toggle. Once it is enabled, the search suggestions will be shown below the search input area.<\/p>\n\n\n\n

Adjust the Suggestions Source<\/strong>. If the \u201cPopular searches\u201d option is selected, the suggestions will be based on the most frequently searched requests on your website or on the weight parameter, if you added some suggestions manually on the backend; and if the second \u201cUser searches\u201d option is picked, the suggestions will be based on the current user’s last search queries.<\/p>\n\n\n\n

Then, adjust the Max Suggestions Number<\/strong>, which limits the number of suggestions displayed. For instance, we put \u201c5,\u201d so only five suggestions will be shown.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

The maximum value that can be set in this field is \u201c20.\u201d<\/p><\/div><\/div>\n\n\n\n

Then, select the Suggestions Position<\/strong>. The suggestions area can be displayed below the search input (\u201cUnder the form\u201d) or inside the search results (\u201cInside search results area\u201d).<\/p>\n\n\n\n

You can also add the Suggestions title <\/strong>if needed. By default, this title will be displayed on the left of the suggestions, but the \u201cInline\u201d Position can later be changed to \u201cBlock\u201d in the Suggestions Area <\/strong>tab of the Style <\/strong>settings.<\/p>\n\n\n\n

\"show<\/a><\/div>\n\n\n\n

If needed, work on the following settings, adjust the widget’s style and press the \u201cPublish\/Update<\/strong>\u201d button to save the result.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Open the needed page. In our case, it can be any page on the website because we have edited the header template, visibility conditions of which are set to \u201cEntire site.\u201d<\/p>\n\n\n\n