Autocomplete

A lightweight, flexible, fast jQuery autocomplete/typehead plugin which automatically suggests matching items while typing keywords(search items) in a text field. This plugin enables your users to quickly filter, find and select items from huge lists such as user list, country list, search results and more.

Installation

Include the JavaScript autocomplete.js and Stylesheet autcomplete.css on the webpage

<link rel='stylesheet' href='autocomplete.css' />
<script src= 'autocomplete.js'></script>

Basic Usage

Autocomplete accespts the options from an object of key/value pair and can be assigned by call a function autocomplete on a input field.

Examples

Javascript:

$(document).ready(function () {

  $('#users').autocomplete({
    dataSource: arrayData,
    textProperty: 'Name',
    valueProperty: 'Id',
  });

)

Events

Autocomplete allows you to Invokes functions like onClick,onChange events. This feature is really helpful when you need to run some code when the selected value is changed or suggestion list is clicked.

Examlple

Selected Value

No item is Selected

Javascript:

$('#users').autocomplete({
   dataSource: arrayData,
   textProperty: 'Name',
   valueProperty: 'Id',
   onClick: function (selectedItem) {
     console.log(selectedItem);
   },
   onChange: function (selectedItem) {
     console.log(selectedItem);
   }
});

Options

Property	Default	Description