Add Autocomplete And Typeahead To Inputs - jQuery Autocomplete

Add Autocomplete And Typeahead To Inputs - jQuery Autocomplete
File Size: 96.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Yet another lightweight and performant jQuery autocomplete/typeahead plugin for inputs that can be used to filter through huge suggestion lists such as country lists, language lists, etc.

How to use it:

1. Load the stylesheet autocomplete.css for the styling of the suggestion list.

<link href="autocomplete.css" rel="stylesheet">

2. Define your suggestions in JSON or an array of JS objects.

const country = [
      {"name": "Afghanistan", "code": "AF"},
      {"name": "land Islands", "code": "AX"},
      {"name": "Albania", "code": "AL"},
      {"name": "Algeria", "code": "DZ"},
      {"name": "American Samoa", "code": "AS"},
      {"name": "AndorrA", "code": "AD"},
      {"name": "Angola", "code": "AO"},
      // more data here

3. Load the jQuery JavaScript library and the autocomplete.js script at the end of the HTML page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="autocomplete.js"></script>

4. Attach the autocomplete plugin to an input field within the document. Don't forget to overide the default text/value properties.

<input type="text" class="autocomplete" value="">
  dataSource: country,

5. Add a custom CSS class to the wrapper.

  dataSource: country,
  wrapClass: 'custom'

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