Output:
Configuration
API Functions
Initialization Data
var data = [
"12 Angry Men",
"Il buono, il brutto, il cattivo.",
"Inception",
"One Flew Over the Cuckoo's Nest",
"Pulp Fiction",
"Schindler's List",
"The Dark Knight",
"The Godfather",
"The Godfather: Part II",
"The Shawshank Redemption"
];
- Description
- View Code
- Configuration (8)
- Methods (4)
- Events (3)
The AutoComplete widget provides suggestions depending on the typed text. It also allows entry of multiple values with by predefined separator.
The suggestions shown by the AutoComplete widget can come from a local Array or from a remote data service.
Getting Started
Create a simple HTML input element
<input id="autocomplete" />Initialize Kendo AutoComplete using a jQuery selector
var autocomplete = $("#autocomplete").kendoAutoComplete(["Item1", "Item2"]);AutoComplete Suggestions
There are two primary ways to provide the AutoComplete suggestions:- From a local, statically defined JavaScript Array
- From a remote data service
Local Suggestions
To configure and provide AutoComplete suggestions locally, you can either pass an Array directly to the AutoComplete constructor, or you can set the AutoComplete dataSource property to an Array defined elsewhere in your JavaScript code.Directly initialize suggestions in constructor
$("#autocomplete").kendoAutoComplete(["Item1", "Item2", "Item3"]);Using dataSource property to bind to local Array
var data = ["Item1", "Item2", "Item3"];
$("#autocomplete").kendoAutoComplete({
dataSource: data
});Remote Suggestions
The easiest way to bind to remote AutoComplete suggestions is to use the Kendo DataSource component. The Kendo DataSource is an abstraction for local and remote data, and it can be used to serve data from a variety of data services, such as XML, JSON, and JSONP.Using Kendo DataSource to bind to remote suggestions with OData
$("#autocomplete").kendoAutoComplete({
minLength: 3,
dataTextField: "Name", //JSON property name to use
dataSource: new kendo.data.DataSource({
type: "odata", //Specifies data protocol
pageSize: 10, //Limits result set
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
})
});Using Kendo DataSource to bind to JSONP suggestions
$(document).ready(function(){
$("#txtAc").kendoAutoComplete({
minLength:6,
dataTextField:"title",
filter: "contains",
dataSource: new kendo.data.DataSource({
transport:{
read:{
url: "http://api.geonames.org/wikipediaSearchJSON",
data:{
q:function(){
var ac = $("#txtAc").data("kendoAutoComplete");
return ac.value();
},
maxRows:10,
username:"demo"
}
}
},
schema:{
data:"geonames"
}
}),
change:function(){
this.dataSource.read();
}
});
});Accessing an Existing AutoComplete
To access an existing Kendo UI AutoComplete widget instance, use the jQuery data API. Once a reference to the AutoComplete is established, you can use the Kendo UI API to control the widget.Accessing Existing AutoComplete widget instance
var autocomplete = $("#autocomplete").data("kendoAutoComplete");No code
-
close()Closes the drop-down list.Example
autocomplete.close(); -
search(word)Filters dataSource using the provided parameter and rebinds drop-down list.Example
var autocomplete = $("#autocomplete").data("kendoAutoComplete"); // Searches for item which has "Inception" in the name. autocomplete.search("Inception");Parameters
-
word: string - The filter value.
-
-
select(li)Selects drop-down list item and sets the text of the autocomplete.Example
var autocomplete = $("#autocomplete").data("kendoAutoComplete"); // selects by jQuery object autocomplete.select(autocomplete.ul.children().eq(0));Parameters
-
li: jQueryObject - The LI element.
-
-
value(value) : StringGets/Sets the value of the autocomplete.Example
var autocomplete = $("#autocomplete").data("kendoAutoComplete"); // get the text of the autocomplete. var value = autocomplete.value();Parameters
-
value: String - The value to set.
- Returns
- String The value of the autocomplete.
-