Customizable Autocomplete Plugin For Input Fields - autocomplete-js

File Size: 241 KB
Views Total: 913
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable Autocomplete Plugin For Input Fields - autocomplete-js

Just another jQuery autocomplete plugin for input fields that enable your users to quickly find and select items from an auto-suggestion list as they type.

How to use it:

1. To use this plugin, you need to load the main JavaScript file autocomplete.min.js after you've loaded jQuery library.

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

2. Call the plugin on the input field and specify an array of pre-defined values for the auto-complete feature.

var demo = $('input').autocomplete({
    options: ["itemA", "itemB", "itemC"]

3. If you want to select values from a dropdown list.

var demo = $('input').autocomplete({
    options: ["itemA", "itemB", "itemC"]
    showDropDown: true,
    backgroundColor: 'white'

4. Config the plugin by override the default options values as displayed below:

var demo = $('input').autocomplete({
    showWhenEmpty: false;
    isDisabled: false;
    inputWidth: '100%';
    inputHeight: '25px';
    dropDownWidth: '50%';
    dropDownDescriptionBoxWidth: '50%';
    fontSize: null;
    fontFamily: null;
    formPromptHTM: '';
    color: null;
    hintColor: null;
    backgroundColor: null;
    dropDownBorderColor: null;
    dropDownZIndex: '100';
    dropDownOnHoverBackgroundColor: null;
    enableHistory: true;
    inputHistory: [];
    classes: {
      input: null;
      dropdown: null;
      hint: null;
      wrapper: null;
      prompt: null;
      hoverItem: null;
      row: null;
      descriptionBox: null;
    maxSuggestionsCount: 100;
    suggestionBoxHeight: '75px';
    showDropDown: false;
    dropDownPosition: 'bottom';
    blockEvents: true;
    options: {};

5. API methods.

// Disables all autocompletion suggestions (should be probably followed by repaint())

// Enables all autocompletion suggestions (see disable()) (should be probably followed by repaint())

// Tests if the autocompletion suggestions are enabled (see disable() or enable())

// Hides a drop down suggestions list by force.

// Returns the options array (if the options field set manually or/and by the constructor is Function type, then the array generated by it will be returned).

// Shows a drop down suggestions list by force.

// Obtains the input text.

// Obtains the input text and clears it.

// Sets the input text.

// Refreshes the autocomplete box.

// Get the input history array.

// Simulate a history browsing event.

// Simulate a history browsing event.

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