Acompleter

All the demos are using the same HTML: one text input.
Note the autocomplete="off" attribute. If your input has a common name such as name, city, etc., then it is most likely that the browser has already stored the values for these inputs.

HTML:


<input type="text" autocomplete="off" />

By default plugin assumes that data is stored in this format:

[ { value: string, data: any_obj }, ... ]

Here I use list of primates living on Earth. The value is the name of the primate and the data is the amount.

DATA (data.json):


[{"value": "Hainan black crested gibbon", "data": "20"},
 {"value": "Eastern black crested gibbon", "data": "35 - 37"},
    ...
 {"value": "Human", "data": "7 000 000 000"}]

Without any styling the plugin is awful. So the minimum CSS is necessary.

CSS:


.results { background: #eee; }
.results ul { list-style: none; padding: 0; margin: 0; }
.results ul li.current { background: #ccc; }

demo #1. Minimum setup.
The only requierd parameter is the url — path to the data.

JS:


$('#demo1 input').acompleter({
	url: "data.json"
});

demo #2. Data in the different format.
To parse input data use the processData callback.

JS:


$('#demo2 input').acompleter({
    url: "primates.json",
    processData: function( loadedData ) {
        return $.map( loadedData, function( result ) {
            return {
                value: result.name,
                data: result.population
            };
        });
    },
    buildListItem: function(value, result) {
        return value + '<span class="qty">' + result.data + "</span>";
    }
});

demo #3. Sorting.
sortResult turn sorting on/off. sortFunction set the sorter-funciton.

JS:


$('#demo3 input').acompleter({
    url: "data.json",
    sortResults: true,
    sortFunction: function(a, b) {
        var parse = function(x) { return parseInt(x.data.replace(/\s/g, ""), 10); };
        return parse(b) - parse(a);
    },
    buildListItem: function(value, result) {
        return value + '<span class="qty">' + result.data + "</span>";
    }
});

settings

delay: 400; Specifies the amount of time to wait for displaying data between each keypress
remoteDataType: "json"; The type of data that you're expecting back from the server. Now only "json" supported. Any other values mean that data is in the plain text format
loadingClass: "loading"; The class name that will be added to the input when the data is loading
onItemSelect: null; A function to be called when the item from the list is selected
resultsClass: "results"; The class name for the dropdown box with the search results
resultsId: pluginName + "-results-" // + uid; Specifies the prefix to the unique id for dropdown box
currentClass: "current"; The class name for the selected list item
onError: null; A function to be called if the request of the data fails
listLength: 10; The maximum number of list entries in the dropdown
minChars: 0; The minimum number of characters a user must type before a search is performed
matchInside: true; Match the search query inside a words
matchCase: false; Do a case-sensetive search or not
filter: null; A function to be called to filter out local data. If false is specified then filtering is turned off
sortResults: false; Turn sorting on or off
sortFunction: null; A function to be called to sort items in the list
lineSeparator: '\n'; Specifies a line separator in the plain text data (remoteDataType!=json)
cellSeparator: '|'; Specifies a cell separator in the plain text data (remoteDataType!=json)
processData: null; A function to be called when remote data is fetched and parsed
buildListItem: null; A function to be called to build HTML for the list item
animation: true; Turn animation on or off
animationSpeed: 177; Animation speed in the list morphings
highlight: true; Highlight the search query inside list items. A function can be passed to generate specific HTML for query highlighting
displayValue: null; A function to be called to insert value of the selected item into input field
selectOnTab: true; Select highlighted item by Tab keystroke
useCache: true; Cache remote data or not
queryParamName: "q"; The name of the url parameter corresponding to search query. If false is specified then the searh query is append to the url
extraParams: {}; Specifies the params what will be passed to the server
makeUrl: null; A function to be called to generate url for the specific search query
getComparableValue: function( result ) { return result.value; }; Returns value by which the plugin will compare result items with each other

¶ All the demos are using the same HTML: one text input. Note the `autocomplete="off"` attribute. If your input has a common name such as `name`, `city`, etc., then it is most likely that the browser has already stored the values for these inputs.	HTML: `<input type="text" autocomplete="off" />`
¶ By default plugin assumes that data is stored in this format: `[ { value: string, data: any_obj }, ... ]` Here I use list of primates living on Earth. The `value` is the name of the primate and the `data` is the amount.	DATA (data.json): `[{"value": "Hainan black crested gibbon", "data": "20"}, {"value": "Eastern black crested gibbon", "data": "35 - 37"}, ... {"value": "Human", "data": "7 000 000 000"}]`
¶ Without any styling the plugin is awful. So the minimum CSS is necessary.	CSS: `.results { background: #eee; } .results ul { list-style: none; padding: 0; margin: 0; } .results ul li.current { background: #ccc; }`
¶ demo #1. Minimum setup. The only requierd parameter is the `url` — path to the data.	JS: `$('#demo1 input').acompleter({ url: "data.json" });`
¶ demo #2. Data in the different format. To parse input data use the `processData` callback.	JS: `$('#demo2 input').acompleter({ url: "primates.json", processData: function( loadedData ) { return $.map( loadedData, function( result ) { return { value: result.name, data: result.population }; }); }, buildListItem: function(value, result) { return value + '<span class="qty">' + result.data + "</span>"; } });`
¶ demo #3. Sorting. `sortResult` turn sorting on/off. `sortFunction` set the sorter-funciton.	JS: `$('#demo3 input').acompleter({ url: "data.json", sortResults: true, sortFunction: function(a, b) { var parse = function(x) { return parseInt(x.data.replace(/\s/g, ""), 10); }; return parse(b) - parse(a); }, buildListItem: function(value, result) { return value + '<span class="qty">' + result.data + "</span>"; } });`
¶ settings delay 400 Specifies the amount of time to wait for displaying data between each keypress remoteDataType "json" The type of data that you're expecting back from the server. Now only "json" supported. Any other values mean that data is in the plain text format loadingClass "loading" The class name that will be added to the input when the data is loading onItemSelect null A function to be called when the item from the list is selected resultsClass "results" The class name for the dropdown box with the search results resultsId pluginName + "-results-" // + uid Specifies the prefix to the unique id for dropdown box currentClass "current" The class name for the selected list item onError null A function to be called if the request of the data fails listLength 10 The maximum number of list entries in the dropdown minChars 0 The minimum number of characters a user must type before a search is performed matchInside true Match the search query inside a words matchCase false Do a case-sensetive search or not filter null A function to be called to filter out local data. If `false` is specified then filtering is turned off sortResults false Turn sorting on or off sortFunction null A function to be called to sort items in the list lineSeparator '\n' Specifies a line separator in the plain text data (remoteDataType!=json) cellSeparator '\|' Specifies a cell separator in the plain text data (remoteDataType!=json) processData null A function to be called when remote data is fetched and parsed buildListItem null A function to be called to build HTML for the list item animation true Turn animation on or off animationSpeed 177 Animation speed in the list morphings highlight true Highlight the search query inside list items. A function can be passed to generate specific HTML for query highlighting displayValue null A function to be called to insert value of the selected item into input field selectOnTab true Select highlighted item by Tab keystroke useCache true Cache remote data or not queryParamName "q" The name of the url parameter corresponding to search query. If `false` is specified then the searh query is append to the url extraParams {} Specifies the params what will be passed to the server makeUrl null A function to be called to generate url for the specific search query getComparableValue function( result ) { return result.value; } Returns value by which the plugin will compare result items with each other