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.
data: object containing the data for each element to be displayed, plus some metadata provided by doubleSuggest such as "_dataSource" that can be [local|remote], and "_number" which is the position of each element.
$elem: is the html li jQuery object where you need to insert your custom formated data.
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.
queryString: the current text entered in the input.
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.
data: the current data associated with the selected result, plus some metadata provided by doubleSuggest such as "_dataSource" that can be [local|remote], and "_number" which is the position of each element.
$elem: is the html li jQuery object that was selected from the results list.
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.
data: the current data associated with the selected result, plus some metadata provided by doubleSuggest such as "_dataSource" that can be [local|remote], and "_number" which is the position of each element.
$elem: is the html li jQuery object that was selected from the results list.
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.
data: the current data object that is about to be processed.
queryString: the current text entered in the input.
isLocal: boolean that indicates if the data passed is local or remote (so you can guess the data format ;D).
resultsComplete: function(){}
Custom function that is run when the suggestion results dropdown list is made visible.