jQuery JSON Suggest/Search Box

Here is my new suggest box as a jQuery plugin which now uses a JSON string to represent it's search data. It will accept the data as a JSON string, the object that the JSON represents or a function that returns one of those two things. Here is an example;


$('input#suggestBox').jsonSuggest(jsonString);

The search data sent to the plugin is an array of objects. Each object must contain atleast a text variable. Further to that in order to display an image in the results it can contain an image variable which is the path to an image and for extra text to be placed in the results but not used to search you can specify an extra variable. Of course as well as these variables which are used to create the results you can specify as many other variables as you want which will then get passed to the callback function if specified. For example I use an ID variable as thats what most applications will require.

As well as the required search data there are a number of options that the plugin accepts in order to change it's behaviour;

  • minCharacters : [default 1] Number of characters that the input should accept before running a search.
  • maxResults: [default undefined] If set then no more results than this number will be found.
  • wildCard : [default ""] A character to be used as a match all wildcard when searching. Leaving empty will mean results are matched inside strings but if a wildCard is present then results are matched from the beginning of strings.
  • caseSensitive : [defautl false] True if the search is to be case sensitive.
  • notCharacter : [default !] The character to use at the start of any search text to specify that the results should NOT contain the following text.
  • maxHeight : [default 350] This is the maximum height that the results box can reach before scroll bars are shown instead of getting taller.
  • highlightMatches: [default true] This will add strong tags around the text that matches the search text in each result.
  • onSelect : [default undefined] function that gets called once a result has been selected, gets passed in the object version of the result as specified in the json string.
  • ajaxResults : [default false] If this is set to true then you must specify a function as the searchData constructor parameter. This is because when this settings is true then results are retrieved from this external function each time they are needed instead of being retrieved from the data given on contruction. The searchData function must return a JSON string of resulting objects or the object which represents the JSON string. The function is passed the following paramenters;
    1. The search text typed into the input box
    2. The current wildCard setting
    3. The current caseSensitive setting
    4. The current notCharacter setting
  • width : [default undefined] If set this will become the width of the results box else the box will be the same width as the input.

As you may have noticed in the options you can handle the search yourself by using an external function. If this is set than you have complete control over what results should show each time a user types in the input box. You can use this to retrieve results dynamically from where ever you want which is good for large database search's etc. Finally the results box can be styled in anyway through the accompanying style sheet.

So if you want to see some other examples then visit my demo page. Apart from that please download the source and use it as you wish. Let me know in the comments if you have found this useful.


Download the source
Visit plugin page at jQuery

Tested to work in the following browsers;

  • IE8, IE 7 & 6
  • FireFox 3.5
  • Opera 9.64
  • Chrome
  • Safari for windows

Last Updated : 18 August 2009