jQuery.Autocomplete is a jQuery based mostly autocomplete plugin that attaches autocomplete/autosuggest drop down record with ajax lookup to textual content enter fields when your customers enter.
See Additionally:
Tips on how to use it:
1. Create an enter subject the place the autocomplete plugin ought to connect to.
<enter kind="textual content" identify="nation" id="autocomplete" />
2. Embrace the jQuery Autocomplete plugin on the web page.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.autocomplete.min.js"></script>
3. Name the perform on the enter subject and specify the trail to the Server aspect URL. Word that the response from the server have to be JSON formatted as follows:
$('#autocomplete').autocomplete({
serviceUrl: '/path/to/international locations/',
onSelect: perform (suggestion) {
alert('You chose: ' + suggestion.worth + ', ' + suggestion.knowledge);
}
});
{
"question": "Unit",
"solutions": [
{ "value": "United Arab Emirates", "data": "AE" },
{ "value": "United Kingdom", "data": "UK" },
{ "value": "United States", "data": "US" }
]
}
4. The plugin additionally means that you can load solutions from native:
var international locations = [
{ "value": "United Arab Emirates", "data": "AE" },
{ "value": "United Kingdom", "data": "UK" },
{ "value": "United States", "data": "US" }
];
$('#autocomplete').autocomplete({
lookup: international locations,
onSelect: perform (suggestion) {
alert('You chose: ' + suggestion.worth + ', ' + suggestion.knowledge);
}
});
5. The instance CSS.
.autocomplete-suggestions {
border: 1px stable #999;
background: #FFF;
cursor: default;
overflow: auto;
}
.autocomplete-suggestion {
padding: 2px 5px;
white-space: nowrap;
overflow: hidden;
}
.autocomplete-selected {
background: #F0F0F0;
}
.autocomplete-suggestions sturdy {
font-weight: regular;
colour: #3399FF;
}
6. Choices and defaults.
$('#autocomplete').autocomplete({
// ajax settings
// seek advice from https://api.jquery.com/jquery.ajax/#jQuery-ajax-settings
ajaxSettings: {},
// kind of information returned from server. Both 'textual content' (default) or 'jsonp'
dataType: 'textual content',
// extra parameters to move with the request
params: {},
// ajax request kind
kind: 'GET',
// whether or not to cache solutions
noCache: false,
// identify of the request parameter that comprises the question
paramName: 'question',
// server aspect URL or callback perform that returns serviceUrl string
serviceUrl: null,
// lookup array for the solutions. It could be array of strings or suggestion object literals
lookup: null,
// a customized filterfunction native lookups
lookupFilter: perform (suggestion, question, queryLowerCase) {},
// variety of most outcomes to show for native lookup
lookupLimit: 10,
// Known as after the results of the question is prepared.
// Convert the outcome into response.solutions format
transformResult: perform(response, originalQuery) {},
// auto choose the primary merchandise
autoSelectFirst: false,
// the place solutions will likely be appended
appendTo: 'physique',
// width
width: 'auto',
// minimal variety of characters required to set off autosuggest
minChars: 1,
// max top
maxHeight: 300,
// variety of miliseconds to defer ajax request
deferRequestBy: 0,
// a customized perform to format outcomes
formatResult: perform (suggestion, currentValue) {},
// a customized perform to format group
formatGroup: perform (suggestion, class) {},
// string or regExp
delimiter: null,
// z-inde property
zIndex: 9999,
// throughout onBlur occasion, browser will set off "change" occasion,
// as a result of worth has modified, to keep away from aspect impact ignore,
// that occasion, in order that appropriate suggestion could be chosen
// when clicking on suggestion with a mouse
preserveInput: false,
// container CSS class
containerClass: 'autocomplete-suggestions',
// allow/disable Tab
tabDisabled: false,
// present request
currentRequest: null,
// if choose ought to be triggered if it matches suggestion
triggerSelectOnValidInput: true,
// stop dangerous queries
preventBadQueries: true,
// present no suggestion discover
showNoSuggestionNotice: false,
noSuggestionNotice: 'No outcomes',
// auto, prime, backside
orientation: 'backside',
// whether or not to pressure repair place
forceFixPosition: false,
// callbacks
onSelect: perform (suggestion) {},
onHint: perform () {},
onSearchStart: perform (question) {},
onSearchComplete: perform (question, solutions) {},
onSearchError: perform (question, jqXHR, textStatus, errorThrown) {},
onInvalidateChoice: perform () {},
beforeRender: perform (container) {},
});
7. API strategies.
// replace choices
$('#autocomplete').autocomplete('setOptions', {
// choices
});
// clear
$('#autocomplete').autocomplete('clear');
// clear cache
$('#autocomplete').autocomplete('clearCache');
// disable/allow
$('#autocomplete').autocomplete('allow');
$('#autocomplete').autocomplete('disable');
// conceal
$('#autocomplete').autocomplete('conceal');
// dispose
$('#autocomplete').autocomplete('dispose');
Changelog:
v2.0.6 (2026-09-13)
v2.0.5 (2026-09-12)
v2.0.4 (2026-06-26)
v2.0.3 (2026-05-23)
v2.0.2 (2026-05-22)
v2.0.0 (2026-05-21)
- drops assist for jQuery 1.x / 2.x and IE-era browsers
v1.5.0 (2025-07-10)
- replace dependencies, format code
v1.4.11 (2023-10-11)
- Cleanup dependencies and take away unnecesary information
v1.4.11 (2021-01-25)
v1.4.11 (2020-05-02)
v1.4.10 (2019-02-13)
v1.4.9 (2018-08-22)
v1.4.8 (2018-06-28)
- Use deep copy when cloning settings.
v1.4.7 (2018-06-04)
v1.4.6 (2017-12-06)
v1.4.5 (2017-11-21)
v1.4.4 (2017-10-31)
v1.4.3 (2017-09-22)
v1.4.0 (2017-04-04)
v1.2.14 (2014-09-22)
v1.2.12 (2014-08-18)
v1.2.10 (2014-08-18)
v1.2.9 (2013-12-09)
- Add skill to restrict outcomes for native lookup.
- Add skill to pick suggestion if it matches typed worth.
This superior jQuery plugin is developed by tkirda. For extra Superior Usages, please examine the demo web page or go to the official web site.
