jQuery UI example - automatically (Autocomplete)
Search and filter value based on user input, allowing users to quickly find and select from a list of preset values.
For more details about the autocomplete component, see the API documentation automatically member (the Autocomplete the Widget) .
Use this section to search.php download .
The default function
When you input field, done automatically (Autocomplete) members provide advice. In this example, there is provided a recommended option programming language, you can enter "ja" try it, you can get Java or JavaScript.
The data source is a simple JavaScript array using a source options are available to members.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - The default function </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$ ( "#tags") .autocomplete ({
source: availableTags
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "tags"> tag: </ label>
<Input id = "tags">
</ Div>
</ Body>
</ Html>
Accented
autocomplete field using source options to customize the results to match items with accented characters, even if the text field does not contain accented characters will match. But if you type accented characters in a text field, it does not display the results of non-stress items.
Try typing "Jo", you see "John" and "Jorn", then type "Jo", will only see "Jorn".
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - accented </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var names = [ "Jörn Zaefferer", "Scott González", "John Resig"];
var accentMap = {
"Á": "a",
"Ö": "o"
};
var normalize = function (term) {
var ret = "";
for (var i = 0; i <term.length; i ++) {
ret + = accentMap [term.charAt (i)] || term.charAt (i);
}
return ret;
};
$ ( "#developer") .autocomplete ({
source: function (request, response) {
var matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
response ($ .grep (names, function (value) {
value = value.label || value.value || value;
return matcher.test (value) || matcher.test (normalize (value));
}));
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Form>
<Label for = "developer"> Developer: </ label>
<Input id = "developer">
</ Form>
</ Div>
</ Body>
</ Html>
classification
Search result classification. Try typing "a" or "n".
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - Category </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</ Style>
<Script>
$ .widget ( "Custom.catcomplete", $ .ui.autocomplete, {
_renderMenu: function (ul, items) {
var that = this,
currentCategory = "";
$ .each (Items, function (index, item) {
if (item.category! = currentCategory) {
ul.append ( "<li class = 'ui-autocomplete-category'>" + item.category + "</ li>");
currentCategory = item.category;
}
that._renderItemData (ul, item);
});
}
});
</ Script>
<Script>
$ (Function () {
var data = [
{Label: "anders", category: ""},
{Label: "andreas", category: ""},
{Label: "antal", category: ""},
{Label: "annhhx10", category: "Products"},
{Label: "annk K12", category: "Products"},
{Label: "annttop C13", category: "Products"},
{Label: "anders andersson", category: "People"},
{Label: "andreas andersson", category: "People"},
{Label: "andreas johnson", category: "People"}
];
$ ( "#search") .catcomplete ({
delay: 0,
source: data
});
});
</ Script>
</ Head>
<Body>
<Label for = "search"> Search: </ label>
<Input id = "search">
</ Body>
</ Html>
Combo box (Combobox)
A custom component created by the Autocomplete and Button. You can type some characters to get based on your input filtering results, or choose from the full list using the buttons.
The input is read from an existing select elements, having passed to the Autocomplete option to customize the source.
This is not a perfect member unsupported. Here is simply to demonstrate autocomplete customization features. For more details about this part works, please click here to view the jQuery articles.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - combo box (Combobox) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/ * Support: IE7 * /
* Height: 1.7em;
* Top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
}
</ Style>
<Script>
(Function ($) {
$ .widget ( "Custom.combobox", {
_create: function () {
this.wrapper = $ ( "<span>")
.addClass ( "custom-combobox")
.insertAfter (this.element);
this.element.hide ();
this._createAutocomplete ();
this._createShowAllButton ();
},
_createAutocomplete: function () {
var selected = this.element.children ( ": selected"),
value = selected.val () selected.text (): "";?
this.input = $ ( "<input>")
.appendTo (this.wrapper)
.val (value)
.attr ( "title", "")
.addClass ( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete ({
delay: 0,
minLength: 0,
source: $ .proxy (this, "_source")
})
.tooltip ({
tooltipClass: "ui-state-highlight"
});
this._on (this.input, {
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger ( "select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function () {
var input = this.input,
wasOpen = false;
$ ( "<a>")
.attr ( "tabIndex", -1)
.attr ( "title", "Show All Items")
.tooltip ()
.appendTo (this.wrapper)
.button ({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass ( "ui-corner-all")
.addClass ( "custom-combobox-toggle ui-corner-right")
.mousedown (function () {
wasOpen = input.autocomplete ( "widget") .is ( ": visible");
})
.click (function () {
input.focus ();
// If you have seen is closed if (wasOpen) {
return;
}
// Pass an empty string as the value of the search, showing all results input.autocomplete ( "search", "");
});
},
_source: function (request, response) {
var matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
response (this.element.children ( "option") .map (function () {
var text = $ (this) .text ();
if (this.value && (! request.term || matcher.test (text)))
return {
label: text,
value: text,
option: this
};
}));
},
_removeIfInvalid: function (event, ui) {
// Select an item and does not perform other actions if (ui.item) {
return;
}
// Search for a match (case insensitive)
var value = this.input.val (),
valueLowerCase = value.toLowerCase (),
valid = false;
this.element.children ( "option") .each (function () {
if ($ (this) .text (). toLowerCase () === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
// A match is found, no other action if (valid) {
return;
}
// Remove the invalid value this.input
.val ( "")
.attr ( "title", value + "did not match any item")
.tooltip ( "open");
this.element.val ( "");
this._delay (function () {
this.input.tooltip ( "close") .attr ( "title", "");
}, 2500);
this.input.data ( "ui-autocomplete") .term = "";
},
_destroy: function () {
this.wrapper.remove ();
this.element.show ();
}
});
}) (JQuery);
$ (Function () {
$ ( "#combobox") .combobox ();
$ ( "#toggle") .click (Function () {
$ ( "#combobox") .toggle ();
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label> your favorite programming language: </ label>
<Select id = "combobox">
<Option value = ""> Choose ... </ option>
<Option value = "ActionScript"> ActionScript </ option>
<Option value = "AppleScript"> AppleScript </ option>
<Option value = "Asp"> Asp </ option>
<Option value = "BASIC"> BASIC </ option>
<Option value = "C"> C </ option>
<Option value = "C ++"> C ++ </ option>
<Option value = "Clojure"> Clojure </ option>
<Option value = "COBOL"> COBOL </ option>
<Option value = "ColdFusion"> ColdFusion </ option>
<Option value = "Erlang"> Erlang </ option>
<Option value = "Fortran"> Fortran </ option>
<Option value = "Groovy"> Groovy </ option>
<Option value = "Haskell"> Haskell </ option>
<Option value = "Java"> Java </ option>
<Option value = "JavaScript"> JavaScript </ option>
<Option value = "Lisp"> Lisp </ option>
<Option value = "Perl"> Perl </ option>
<Option value = "PHP"> PHP </ option>
<Option value = "Python"> Python </ option>
<Option value = "Ruby"> Ruby </ option>
<Option value = "Scala"> Scala </ option>
<Option value = "Scheme"> Scheme </ option>
</ Select>
</ Div>
<Button id = "toggle"> display based selection box </ button>
</ Body>
</ Html>
Custom data and display
You can use a custom data format, and by focusing simply override the default behavior and select to display the data.
Try typing "j", or press the down arrow key, you can get a list of items.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - Custom data and displays </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
# Project-icon {
float: left;
height: 32px;
width: 32px;
}
# Project-description {
margin: 0;
padding: 0;
}
</ Style>
<Script>
$ (Function () {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$ ( "#project") .autocomplete ({
minLength: 0,
source: projects,
focus: function (event, ui) {
$ ( "#project") .val (Ui.item.label);
return false;
},
select: function (event, ui) {
$ ( "#project") .val (Ui.item.label);
$ ( "# Project-id") .val (ui.item.value);
$ ( "# Project-description") .html (ui.item.desc);
$ ( "# Project-icon") .attr ( "src", "images /" + ui.item.icon);
return false;
}
})
.data ( "ui-autocomplete") ._ renderItem = function (ul, item) {
return $ ( "<li>")
.append ( "<a>" + item.label + "<br>" + item.desc + "</a>")
.appendTo (ul);
};
});
</ Script>
</ Head>
<Body>
<Div id = "project-label"> Select an item (type "j"): </ div>
<Img id = "project-icon" src = "images / transparent_1x1.png" class = "ui-state-default" alt = "">
<Input id = "project">
<Input type = "hidden" id = "project-id">
<P id = "project-description"> </ p>
</ Body>
</ Html>
Multiple values
Usage: Type some characters, such as "j", you can see the results of relevant programming languages. Select a value, and then type the characters continue to add additional value.
This example demonstrates how to use source options and events to achieve in the value of a single text field to enter multiple automatic.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - multiple values </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split (val) {
return val.split (/, \ s * /);
}
function extractLast (term) {
return split (term) .pop ();
}
$ ( "#tags")
// When you select an item without leaving the text field .bind ( "keydown", function (event) {
if (event.keyCode === $ .ui.keyCode.TAB &&
$ (This) .data ( "ui-autocomplete") .menu.active) {
event.preventDefault ();
}
})
.autocomplete ({
minLength: 0,
source: function (request, response) {
// Back autocomplete, but to extract the last entry response ($ .ui.autocomplete.filter (
availableTags, extractLast (request.term)));
},
focus: function () {
// Prevent obtaining focus insert values return false;
},
select: function (event, ui) {
var terms = split (this.value);
// Remove the current input terms.pop ();
// Add the selected option terms.push (ui.item.value);
// Add a placeholder, add a comma at the end of + Space terms.push ( "");
this.value = terms.join ( ",");
return false;
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "tags"> Programming Languages: </ label>
<Input id = "tags" size = "50">
</ Div>
</ Body>
</ Html>
Multiple values, remote
Usage: Type the two characters at least to get the names of birds. Select a value, and then type the characters continue to add additional value.
This example demonstrates how to use source options and events to achieve in the value of a single text field to enter multiple automatic.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - multiple values, remote </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-loading {
background: white url ( 'images / ui-anim_basic_16x16.gif') right center no-repeat;
}
</ Style>
<Script>
$ (Function () {
function split (val) {
return val.split (/, \ s * /);
}
function extractLast (term) {
return split (term) .pop ();
}
$ ( "#birds")
// When you select an item without leaving the text field .bind ( "keydown", function (event) {
if (event.keyCode === $ .ui.keyCode.TAB &&
$ (This) .data ( "ui-autocomplete") .menu.active) {
event.preventDefault ();
}
})
.autocomplete ({
source: function (request, response) {
$ .getJSON ( "Search.php", {
term: extractLast (request.term)
}, Response);
},
search: function () {
// Custom minimum length var term = extractLast (this.value);
if (term.length <2) {
return false;
}
},
focus: function () {
// Prevent obtaining focus insert values return false;
},
select: function (event, ui) {
var terms = split (this.value);
// Remove the current input terms.pop ();
// Add the selected option terms.push (ui.item.value);
// Add a placeholder, add a comma at the end of + Space terms.push ( "");
this.value = terms.join ( ",");
return false;
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "birds"> Bird: </ label>
<Input id = "birds" size = "50">
</ Div>
</ Body>
</ Html>
Remote data source JSONP
When you type characters in a text field, Autocomplete components give advice results. In this example, when you type at least two characters in a text field, it will display the name of the relevant city.
In this example, the data source is geonames.org WebService . Although the choice of a text field after the element is the name of the city, but will display more information in order to find the correct entry. Data can also be a callback, the results are displayed in the box below.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - JSONP remote data source </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-loading {
background: white url ( 'images / ui-anim_basic_16x16.gif') right center no-repeat;
}
#city {width: 25em;}
</ Style>
<Script>
$ (Function () {
function log (message) {
$ ( "<Div>") .text (message) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#city") .autocomplete ({
source: function (request, response) {
$ .ajax ({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function (data) {
response ($ .map (data.geonames, function (item) {
return {
label: item.name + (item.adminName1 "," + item.adminName1:? "") + "," + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2,
select: function (event, ui) {
log (ui.item?
"Selected:" + ui.item.label:
"Nothing selected, input was" + this.value);
},
open: function () {
$ (This) .removeClass ( "ui-corner-all") .addClass ( "ui-corner-top");
},
close: function () {
$ (This) .removeClass ( "ui-corner-top") .addClass ( "ui-corner-all");
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "city"> your city: </ label>
<Input id = "city">
Powered by <a href="http://geonames.org" target="_blank"> geonames.org </a>
</ Div>
<Div class = "ui-widget" style = "margin-top: 2em; font-family: Arial">
result:
<Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget-content"> </ div>
</ Div>
</ Body>
</ Html>
The remote data source
When you type characters in a text field, Autocomplete components give advice results. In this example, when you type at least two characters in a text field, it will display the relevant names of birds.
In this example, the data source is returned JSON data server-side script to specify a simple source options. In addition, minLength option is set to 2, to avoid the query returns too many results, select the event to display some feedback.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - remote data source </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-loading {
background: white url ( 'images / ui-anim_basic_16x16.gif') right center no-repeat;
}
</ Style>
<Script>
$ (Function () {
function log (message) {
$ ( "<Div>") .text (message) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#birds") .autocomplete ({
source: "search.php",
minLength: 2,
select: function (event, ui) {
log (ui.item?
"Selected:" + ui.item.value + "aka" + ui.item.id:
"Nothing selected, input was" + this.value);
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "birds"> Bird: </ label>
<Input id = "birds">
</ Div>
<Div class = "ui-widget" style = "margin-top: 2em; font-family: Arial">
result:
<Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget-content"> </ div>
</ Div>
</ Body>
</ Html>
Remote cache
When you type characters in a text field, Autocomplete components give advice results. In this example, when you type at least two characters in a text field, it will display the relevant names of birds.
To improve performance, add here a few local cache, other instances of similar remote data sources. Here, only saved a query cache, and the cache can be extended to multiple values, each entry is a value.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - Remote Cache </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-loading {
background: white url ( 'images / ui-anim_basic_16x16.gif') right center no-repeat;
}
</ Style>
<Script>
$ (Function () {
var cache = {};
$ ( "#birds") .autocomplete ({
minLength: 2,
source: function (request, response) {
var term = request.term;
if (term in cache) {
response (cache [term]);
return;
}
$ .getJSON ( "Search.php", request, function (data, status, xhr) {
cache [term] = data;
response (data);
});
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "birds"> Bird: </ label>
<Input id = "birds">
</ Div>
</ Body>
</ Html>
Scrollable result
When displaying a long list of options, you can simply set max-height to prevent autocomplete menu to display the menu too. Try typing "a" or "s" to get the result of a long scrollable list.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - scrollable result </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/ * Prevent the horizontal scroll bar * /
overflow-x: hidden;
}
/ * IE 6 does not support the max-height
* We use instead of height, but this will force the menu is always displayed as the height * /
* Html .ui-autocomplete {
height: 100px;
}
</ Style>
<Script>
$ (Function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$ ( "#tags") .autocomplete ({
source: availableTags
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "tags"> tag: </ label>
<Input id = "tags">
</ Div>
</ Body>
</ Html>
XML data
This example shows how to get some XML data and uses jQuery method to resolve it and provide it to autocomplete as the data source.
This example also be used as resolving a remote XML data source reference - Analysis occur at each source callback request.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI auto-completion (Autocomplete) - XML data </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-loading {background: white url ( 'images / ui-anim_basic_16x16.gif') right center no-repeat;}
</ Style>
<Script>
$ (Function () {
function log (message) {
$ ( "<Div />") .text (message) .prependTo ( "#log");
$ ( "#log") .attr ( "ScrollTop", 0);
}
$ .ajax ({
url: "london.xml",
dataType: "xml",
success: function (xmlResponse) {
var data = $ ( "geoname", xmlResponse) .map (function () {
return {
value: $ ( "name", this) .text () + "," +
($ .trim ($ ( "CountryName", this) .text ()) || "(unknown country)"),
id: $ ( "geonameId", this) .text ()
};
.}) Get ();
$ ( "#birds") .autocomplete ({
source: data,
minLength: 0,
select: function (event, ui) {
log (ui.item?
"Selected:" + ui.item.value + ", geonameId:" + ui.item.id:
"Nothing selected, input was" + this.value);
}
});
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "birds"> London Match: </ label>
<Input id = "birds">
</ Div>
<Div class = "ui-widget" style = "margin-top: 2em; font-family: Arial">
result:
<Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget-content"> </ div>
</ Div>
</ Body>
</ Html>