jQuery Ajax Autocomplete Plugin For Input Fields - Autocomplete

jQuery Ajax Autocomplete Plugin For Input Fields - Autocomplete
File Size: 230 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

jQuery.Autocomplete is a jQuery based autocomplete plugin that attaches autocomplete/autosuggest drop down list with ajax lookup to text input fields when your users input.

You might also like:

How to use it:

1. The html

<input type="text" name="country" id="autocomplete-ajax"/>

2. Include necessary javascript files on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="scripts/jquery.mockjax.js"></script> 
<script src="src/jquery.autocomplete.js"></script> 

3. The CSS

.autocomplete-suggestions {
border: 1px solid #999;
background: #FFF;
cursor: default;
overflow: auto;
}
.autocomplete-suggestion {
padding: 2px 5px;
white-space: nowrap;
overflow: hidden;
}
.autocomplete-selected {
background: #F0F0F0;
}
.autocomplete-suggestions strong {
font-weight: normal;
color: #3399FF;
}

4. The sample Javascript

$(function () {
'use strict';

// Load countries then initialize plugin:
$.ajax({
url: 'content/countries.txt',
dataType: 'json'
}).done(function (source) {

var countriesArray = $.map(source, function (value, key) { return { value: value, data: key }; }),
countries = $.map(source, function (value) { return value; });

// Setup jQuery ajax mock:
$.mockjax({
url: '*',
responseTime:  200,
response: function (settings) {
var query = settings.data.query,
queryLowerCase = query.toLowerCase(),
suggestions = $.grep(countries, function(country) {
 return country.toLowerCase().indexOf(queryLowerCase) !== -1;
}),
response = {
query: query,
suggestions: suggestions
};

this.responseText = JSON.stringify(response);
}
});

// Initialize ajax autocomplete:
$('#autocomplete-ajax').autocomplete({
serviceUrl: '/autosuggest/service/url',
onSelect: function(suggestion) {
$('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});

// Initialize autocomplete with local lookup:
$('#autocomplete').autocomplete({
lookup: countriesArray,
onSelect: function (suggestion) {
$('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});

// Initialize autocomplete with custom appendTo:
$('#autocomplete-custom-append').autocomplete({
lookup: countriesArray,
appendTo: '#suggestions-container'
});

});

});

5. Options and defaults.

  • serviceUrl: Server side URL or callback function that returns serviceUrl string. Optional if local lookup data is provided.
  • ajaxSettings: Any additional Ajax Settings that configure the jQuery Ajax request.
  • lookup: Lookup array for the suggestions. It may be array of strings or suggestion object literals.
  • lookupFilter: function (suggestion, query, queryLowerCase) {} filter function for local lookups. By default it does partial string match (case insensitive).
  • lookupLimit: Number of maximum results to display for local lookup. Default: no limit.
  • onSelect: function (suggestion) {} Callback function invoked when user selects suggestion from the list. this inside callback refers to input HtmlElement.
  • minChars: Minimum number of characters required to trigger autosuggest. Default: 1.
  • maxHeight: Maximum height of the suggestions container in pixels. Default: 300.
  • deferRequestBy: Number of miliseconds to defer ajax request. Default: 0.
  • width: Suggestions container width in pixels, e.g.: 300. Default: auto, takes input field width.
  • params: Additional parameters to pass with the request, optional.
  • formatResult: function (suggestion, currentValue) {} custom function to format suggestion entry inside suggestions container, optional.
  • delimiter: String or RegExp, that splits input value and takes last part to as query for suggestions. Useful when for example you need to fill list of coma separated values.
  • zIndex: 'z-index' for suggestions container. Default: 9999.
  • type: Ajax request type to get suggestions. Default: GET.
  • noCache: Boolean value indicating whether to cache suggestion results. Default false.
  • onSearchStart: function (query) {} called before ajax request. this is bound to input element.
  • onSearchComplete: function (query, suggestions) {} called after ajax response is processed. this is bound to input element. suggestions is an array containing the results.
  • onSearchError: function (query, jqXHR, textStatus, errorThrown) {} called if ajax request fails. this is bound to input element.
  • onInvalidateSelection: function () {} called when input is altered after selection has been made. this is bound to input element.
  • triggerSelectOnValidInput: Boolean value indicating if select should be triggered if it matches suggestion. Default true.
  • preventBadQueries: Boolean value indicating if it shoud prevent future ajax requests for queries with the same root if no results were returned. E.g. if Jam returns no suggestions, it will not fire for any future query that starts with Jam. Default true.
  • beforeRender: function (container) {} called before displaying the suggestions. You may manipulate suggestions DOM before it is displayed.
  • tabDisabled: Default false. Set to true to leave the cursor in the input field after the user tabs to select a suggestion.
  • paramName: Default query. The name of the request parameter that contains the query.
  • transformResult: function(response, originalQuery) {} called after the result of the query is ready. Converts the result into response.suggestions format.
  • autoSelectFirst: if set to true, first item will be selected when showing suggestions. Default value false.
  • appendTo: container where suggestions will be appended. Default value document.body. Can be jQuery object, selector or html element. Make sure to set position: absolute orposition: relative for that element.
  • dataType: type of data returned from server. Either 'text' (default) or 'jsonp', which will cause the autocomplete to use jsonp. You may return a json object in your callback when using jsonp.
  • showNoSuggestionNotice: Default false. When no matching results, display a notification label.
  • noSuggestionNotice: Default No results. Text or htmlString or Element or jQuery object for no matching results label.
  • forceFixPosition: Default: false. Suggestions are automatically positioned when their container is appended to body (look at appendTo option), in other cases suggestions are rendered but no positioning is applied. Set this option to force auto positioning in other cases.
  • orientation: Default bottom. Vertical orientation of the displayed suggestions, available values are auto, top, bottom. If set to auto, the suggestions will be orientated it the way that place them closer to middle of the view port.
  • formatGroup: function (suggestion, category) {} custom function to format group header
  • groupBy: property name of the suggestion data object, by which results should be grouped
  • preserveInput: If true, input value stays the same when navigating over suggestions
  • onHint: function (container) {} used to change input value to first suggestion automatically
  • onHide: function (container) {} called before container will be hidden

Change logs:

v1.4.7 (2017-12-12)

  • Update.

v1.4.6 (2017-12-06)

  • Update.

v1.4.5 (2017-11-21)

  • Update.

v1.4.4 (2017-10-31)

  • Update.

v1.4.3 (2017-09-22)

  • Update.

v1.4.0 (2017-04-04)

  • Update.

v1.2.14 (2014-09-22)

  • Update.

v1.2.12 (2014-08-18)

  • Update.

v1.2.10 (2014-08-18)

  • Update.

v1.2.9 (2013-12-09)

  • Add ability to limit results for local lookup. 
  • Add ability to select suggestion if it matches typed value.

This awesome jQuery plugin is developed by devbridge. For more Advanced Usages, please check the demo page or visit the official website.