Help Center

Search Suggestions Widget Overview

Search Suggestions Widget Overview

This tutorial describes the Search Suggestions widget options available with the JetSearch WordPress plugin. Learn how to highlight searched text, show a suggestions list in a dropdown, category list, and submit button.

Before you start check tutorial requirements:

  • Elementor (Free version)

  • JetSearch plugin installed and activated

General Features

The Search Suggestions widget displays the search queries (suggestions) list formed from previously entered real search queries (or those manually entered by the site administrator).

This widget is different from the Ajax Search widget. Ajax Search displays quick search results based on the beginning of the search phrase. Search Suggestions helps users choose the most appropriate search phrase, depending on the search query options already used on this site or pre-set by the admin.

search suggestions widget

Content Settings

The widget’s Content settings are divided into two sections: Search Form and WooCommerce (if the WooCommerce plugin is installed and activated).

Search Form settings

The Search Form section includes the following settings:

  • Placeholder Text. Here users can placeholder text for the Search field;
  • Show preloader. Shows/hides the preloader (loading animation) before offering suggestions. If the option is enabled, a dropdown with a preloader will appear as soon as users start entering a search query and will be replaced by a list of suggestions afterward;
  • Highlight Searched Text. Whether or not to highlight the entered text in the list of found suggestions;
  • Number of Suggestions. Allows setting the maximum number of suggestions displayed in the dropdown;
  • Show Submit Button. Shows/hides the search button;
  • Submit Button Label. If the button is shown, users can set a text label for it;
  • Submit Button Icon. If the button is shown, users can set an icon for it;
  • Show Categories List. Shows/hides the category selector. This selector is not related to suggestions at the moment. Using it, yousers can select a category where the search will be performed later (similar to the Ajax Search widget);
  • Taxonomy. If enabled, this toggle turns on the drop-down menu for choosing which taxonomy terms will be shown in the category selector;
  • Select Placeholder. Users can enter the placeholder text for the category selector;
  • Show Suggestions Below Search Form. Shows/hides the list of suggested search queries below the search form. Clicking on a suggestion in this list works similarly to selecting this suggestion in the form. In both cases, users will be redirected to the search page with the selected suggestion as a search query; if enabled, this toggle turns on the following options:
    • Suggestions List drop-down menu allows setting where to get suggestions for this list: from the “Most popular” search queries on the site, from the “Latest” search queries, or “Manual” input. With manual input, users need to enter a list of search queries separated by commas. This list is not directly related to the suggestions database. When you click on these suggestions, their processing will occur as with a regular search query, meaning if it is already in the database, its weight will be increased by 1. If this is a new request, it will be added to the suggestions database with a weight of “1”;
    • Number of Suggestions. The maximum number of the most popular or latest suggestions you want to show;
    • Number of Suggestions field allows typing the maximum number of the most popular or latest suggestions you want to show;
  • Show Suggestions on Input Focus toggle allows users to determine whether to display or not a list of recommended suggestions when clicking on the Search field. If enabled, this toggle turns on the following options:
    • Suggestions List drop-down menu is configured similarly to the same option for the Show Suggestions Below Search Form; the selected “Manual” option enables the List of Manual Suggestions – a field for entering a list of manual suggestions;
    • Number of Suggestions field to type the maximum number of the most popular or latest suggestions users want to show;

WooCommerce settings

The WooCommerce section has the Is Products Search toggle.

Enabling this toggle sets the WooCommerce product archive as the source for the list of suggestions. The search will proceed according to the entered query and the Search Form settings.

Style Settings

The presented sections contain Search Form, Input Field, Submit Button, Categories List, Inline Area, Focus Area, and Spinner settings to customize every widget component.

Advanced Settings

The Advanced settings include Layout (Margin, Padding, Width, Z-index, and more),  Motion Effects (Entrance Animation drop-down menu), Transform (Rotate, Offset, Scale, etc.), Background, Border (Type, Radius, Shadow), Mask, Responsive, Attributes, and Custom CSS settings.

That’s all about the Search Suggestions widget and its settings available with the JetSearch plugin for your WordPress website.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.