doubleSuggest


This jQuery plugin will set up a UI that suggest results as you type.
It will display two types of suggestions, first (and faster) the local data and second (and slower) the results from an ajax search query.


Options

Options are presented as option: default value
localSource: false
Expects a list of objects e.g: [{ob: 1}, {ob: 2}, {ob: 3}] where doubleSuggest gets the local results from.
remoteSource: false
Expects an url string where doubleSuggest will load the remote results from via jQuery.getJSON().
emptyText: 'No Results Found'
Text to display when their are no search results.
loadingText: 'Loading...'
Text to display when the results are being retrieved. Set it to false if you don't want this text to be displayed.
selectValue: 'value'
Name of object property passed as data source to doubleSuggest that is going to be displayed in the results list.
seekValue: 'value'
Comma separated list of object property names passed as data source to doubleSuggest used to search for results.
queryParam: 'q'
The name of the param that will hold the search string value in the AJAX request.
extraParams: {}
Key - value object to pass along with the ajax request.
queryLimit: false
Max number of local results to be displayed.
On the server side if you have access to the database query, limit the number of results from there as it will be more performant that bringing a huge results list and slicing it locally. You can also use the extraParams option to specify a limit for your query.
matchCase: false
Makes the search case sensitive when set to true.
minChars: 1
Minimum number of characters that must be entered before the search begins.
keyDelay: 500
The delay after a keydown on the input field triggers a new search.
resultsHighlight: true
Option to choose whether or not to highlight the matched text in each result item.
formatList: false
Custom function that is run after all the data has been retrieved and before each result is put into the suggestion results list.
Here you can modify how results are presented, like adding an image for example. You need to return the html li element.
"this" inside this function points to the input which doubleSuggest is binded to.
beforeRetrieve: function(queryString){ return string; }
Custom function that is run before the AJAX request is made, or the local object is searched. You need to return a string.
onSelect: function(data, $elem){}
Custom function that is run when a result is selected with a mouse click or via enter / tab keys.
"this" inside this function points to the input which doubleSuggest is binded to.
onResultFocus: function(data, $elem){}
Custom function that is run whena result is focused on mouse over / up - down key navigation.
"this" inside this function points to the input which doubleSuggest is binded to.
retrieveComplete: function(data, queryString, isLocal){ return data; }
Use the function to modify the data that is going to be processed by doubleSuggest. You need to return a valid data source object.
resultsComplete: function(){}
Custom function that is run when the suggestion results dropdown list is made visible.
Fork me on GitHub