get-started.md

title	page_title	description	slug	position
Getting Started	jQuery AutoComplete Documentation - Getting Started with the AutoComplete	Get started with the jQuery AutoComplete by Kendo UI and learn how to create, initialize, and enable the component.	getting_started_kendoui_autocomplete_component	1

Getting Started with the AutoComplete

This guide demonstrates how to get up and running with the Kendo UI for jQuery AutoComplete.

After the completion of this guide, you will be able to achieve the following end result:

  <input id="autocomplete" />
  <script>
    $("#autocomplete").kendoAutoComplete({
      dataSource: [
        { id: 1, name: "Apples" },
        { id: 2, name: "Oranges" }
      ],
      dataTextField: "name",
      label: { 
        content: "Fruits",
        floating: true 
      },
      clearButton: false
    });
  </script>

1. Create an input Element

First, create an <input> element on the page that will be used to initialize the component.

<input id="autocomplete" />

2. Initialize the AutoComplete

In this step, you will initialize the AutoComplete from the <input> element. Upon its initialization, the AutoComplete wraps the <input> element with a <span> tag.

<input id="autocomplete" />

<script>
    // Target the input element by using jQuery and then call the kendoAutoComplete() method.
    $("#autocomplete").kendoAutoComplete({
      // Add some basic configurations such as a clear button.
      clearButton: false
    });
</script>

3. Specify the Data Source

Here, you will specify a dataSource configuration for the component which is used to display the list of values.

  <input id="autocomplete" />

  <script>
  $("#autocomplete").kendoAutoComplete({
    // Add an array of elements to the DataSource.
    dataSource: [
      { id: 1, name: "Apples" },
      { id: 2, name: "Oranges" }
    ],
    dataTextField: "name", //The field of the data item that provides the text content of the list items.
    clearButton: false
  });
</script>

4. Apply Some Styling

The AutoComplete provides several options that enable you to modify its appearance. In this example, you will apply a flat fillMode configuration to the component.

<input id="autocomplete" />

<script>
    $("#autocomplete").kendoAutoComplete({
      dataSource: [
        { id: 1, name: "Apples" },
        { id: 2, name: "Oranges" }
      ],
      dataTextField: "name",
      clearButton: false,
      fillMode: "flat" // Apply a flat fillMode.
    });
</script>

5. Configure the Label

The AutoComplete enables you to configure its label by using its label property.

<input id="autocomplete" />

<script>
    $("#autocomplete").kendoAutoComplete({
        dataSource: [
          { id: 1, name: "Apples" },
          { id: 2, name: "Oranges" }
        ],
        dataTextField: "name",
        clearButton: false,
        fillMode: "flat",
        label: { 
          content: "Customers", // Specify the label content.
          floating: true // Allow the label to float.
        }
    });
</script>

Next Steps

• [Referencing Existing Component Instances]({% slug widget_methodsand_events_kendoui_installation %})
• Demo Page for the Kendo UI for jQuery AutoComplete

See Also

• JavaScript API Reference of the jQuery AutoComplete
• Knowledge Base Section

<script> window.onload = function() { document.getElementsByClassName("btn-run")[0].click(); } </script>