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 is also an example of requesting JSON data from
a URL and retrieving results from a custom function on each search which is handy. 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, the javascript will only set their position
underneath the text box.
$('input#suggestBox4').jsonSuggest(
function(text, wildCard, caseSensitive, notCharacter) {
// From here you can put your own logic in to say what results show.
// For now I'm just going to return some dummy data.
return [
{text:'View'},
{text:'the'},
{text:'source'},
{text:'for'},
{text:'this'},
{text:'one'}
];
}, {ajaxResults:true});
Options
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 filter search's are 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 construction parameter. This is because when this
settings is true then results are retrieved from an 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;
The search text typed into the input box
The current wildCard setting
The current caseSensitive setting
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