Here are a few examples of using the suggest box. Have a look at the testData.js file to see what kind of data I am passing in to the plugin. There are more options than those being used in these few examples so see the options break down at the bottom of this page. The drop downs can be styled however you wish, however jQuery themes are fully supported.
$('input#suggestBox').jsonSuggest({data: testData.countryCodes, minCharacters: 2});
$('input#suggestBox2').jsonSuggest({data: testData.webSites, onSelect: callback});
// will always return all results, expected use is to call a URL that does something with the search text
// before returning a sub set of results.
$('input#suggestBox3').jsonSuggest({url: 'http://tomcoote.co.uk/static/JSONSuggestBox2/testData/countryCodes.txt', maxResults: 20});
| Name | Default | Description |
|---|---|---|
| url | '' | A URL that will return a JSON response. Called via $.getJSON, it is passed a data dictionary containing the user typed search phrase. It must return a JSON string that represents the array of results to display. |
| data | [] | An array or JSON string representation of an array of data to search through. See Examples. |
| minCharacters | 1 | Number of characters that the input should accept before running a search. |
| maxResults | undefined | If set then no more results than this number will be found. |
| wildCard | '' | 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 | false | True if the filter search's are to be case sensitive. |
| notCharacter | ! | The character to use at the start of any search text to specify that the results should NOT contain the following text. |
| maxHeight | 350 | This is the maximum height that the results box can reach before scroll bars are shown instead of getting taller. |
| width | undefined | If set this will become the width of the results box else the box will be the same width as the input. |
| highlightMatches | true | This will add strong tags around the text that matches the search text in each result. |
| onSelect | 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 data. |