Live search

255 views November 15, 2016 November 17, 2016 admin 0

Live Search showing results while typing.

Live Search showing results while typing.

Live Search

Also called Product Suggestions, or Instant search, it extends your search forms with an AJAX search. It shows the search results in a drop-down list while you’re typing, rather than redirecting you to a results page.

Thanks to the magic of jQuery selectors, any of your website’s boring search form is transformed in an appealing suggestions box.

How Live Search works ?

A WPSOLR javascript monitors all search boxes associated to a specific jQuery selector (see below).

So, while a visitor is typing some keywords, in the background the javascript performs an Ajax call to a dedicated piece of php code. Of course, for security reasons, the php code first verifies that the Ajax call is authorized by checking its encrypted nonce.

The php code then runs a search with the user keywords, and returns a list of results. The javascript finally formats the results as a clickable list of links.

 

How to customize the look of the suggestions list?

You can easily change the way Live results are displayed with some css tweaking. Change colors, zoom in or out the characters police, or even hide some sections.

 

How to activate Instant Search ?

Instant Search being a search, all the usual WPSOLR settings of the search page results are also used. You just need to activate the Live search by selecting the option in WPSOLR’s admin screen.

Select the "Suggest products" option to activate live suggestions.Select the “Suggest products” option to activate live suggestions.

 

How to attach the list to my search forms ?

There is a setting to indicate to the Live Search javascript which search forms to track. This is done with a jQuery selector, which can target virtually any of your theme’s search forms. You can use a single id to apply live search to a single search form, or a class to track several or all your search forms.

 

Use the jQuery selector box to indicate which of your search form(s) to enhance with WPSOLR Live Search.

Use the jQuery selector box to indicate which of your search form(s) to enhance with WPSOLR Live Search.

 

 

 

Was this helpful?

Leave A Comment
*
*