With SearchUnit, AJAX based auto-complete is enabled out of the box. As soon as you've setup your first search project and indexed your documents, you will have full use of auto complete features.

Taking things further

Watch our autocomplete video tutorial or read more below;

We'll be running through the different auto complete options available to you and then we'll demonstrate how to further customize the suggestions that are displayed to your end users.

In this tutorial, we'll be using the JavaScript method of usage but all the following features are also available with our alternative Control based usage if you prefer. Please see the documentation for details.

You can easily change the behaviour of the Auto Complete suggestions using the AutoComplete namespace.

Show the number of suggestions

Let's say we want to change the number of auto-complete suggestions shown as you type a query - simply add the following function to your page;

You can see that the maximum number of suggestions has changed to ‘3’ in our example.

Deactivate search on select

Another option available to us is to deactivate ‘search on select’ so that the user has to click the search button after choosing an autocomplete suggestion;

Display number of search results

We can also show the estimated number of results for each autocomplete suggestion;

So, by default the suggestions come from a mixture of Popular searches, and the lexicon of the Indexed documents. We can change this by setting the data source to either use the IndexLexicon only or PopularSearches only. Like this;

or

The algorithm uses an attenuating window to keep new queries important and prevent the popular-search list becoming too large over time.

You also have the option of creating your own autocomplete suggestion.

To achieve this, simply create a new index directory that contains the source you want to use for autocomplete suggestions. This could be a word list, a database of product names or anything else.

Once you've created your new index directory for autocomplete suggestions, you just need to set the path to your new index directory;

You can easily add auto complete suggestions to other controls. If for example you wanted to use your own TextArea as the searchbox, all you need to do is set the TextArea's id to sew_searchBox

To use your own search button to initiate search, you just need to set the button's ID to sew_searchButton and add this onclick event;

In our final example, we'll show you how to further customize auto-complete behaviour according to your own logic. Here we'll be using JavaScript to alter the suggestions but you can also use SearchUnit’s Plugin architecture – please see the documentation for plugin usage.

So, on the page with the SearchBox, specify a function like this;

this will be automatically called by the autocomplete engine when suggestions are generated, allowing for modification of the suggestion list or items in the list.

In this example we’re going to turn each suggestion in to a wildcard, and also add a bonus suggestion, with 10 predicted results;