JavaScript / jQuery Autocomplete Textbox From Array

An ultra lightweight and simple autocomplete (text suggestion) plugin for jQuery. The plugin lets you to create autocomplete functionality for input, textbox or textarea element. You just need to define an array of auto completion terms, then this lightweight plugin will show them under the text input.

Plugin Overview

Plugin: jquery-select-autocomplete
Author: Arthur Mironov
Licence: MIT Licence
Published: May 29, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.8.0 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 7.18 KB

How to Use jQuery Autocomplete Textbox Plugin

1. Load the latest jQuery and autocomplete‘s CSS and JavaScript files into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Textbox Autocomplete Assets -->
<link href="css/jquery.select-autocomplete.css" rel="stylesheet" type="text/css">
<script src="js/jquery.select-autocomplete.js"></script>

2. After that, create an input element with a unique id and wrap it into div (if you want to adjust it).

<div class="wrapper">
      <input id="autocomplete" type="text" name="search" />
</div>

3. Now, define an array in jQuery document ready function that contains objects of your autocomplete text (in name field) and unique id. Call the plugin and put your array in plugin’s data option.

 $(document).ready(function() {

  var myArray = [
            { id: "id111", name: "aaaa" },
            { id: "id222", name: "bbbb" },
            { id: "id333", name: "cccc" },
            { id: "id444", name: "dddd" },
            { id: "id555", name: "eeee" },
            { id: "id666", name: "ffff" },
            { id: "id777", name: "gggg" },
            { id: "id888", name: "hhhh" },
            { id: "id999", name: "iiii" }
          ];

        $("#autocomplete").selectAutocomplete({
          data: myArray
        });
      });

Advance Options to Create Autocomplete Textbox

The following are some advance configuration options to create javascript autocomplete textbox from array.

Option Description, Default, Type
showCancelButton

Decide weather to show cancel button (that will clear input). Default: true, Type: Boolean.

$("#autocomplete").selectAutocomplete({
   showCancelButton: true,
});
cancelButtonText

Define the text for cancel button. Default: “Remove”, Type: String.

$("#autocomplete").selectAutocomplete({
   cancelButtonText: "Remove",	
});
data

This option used to submit array (of suggestion text) to plugin. Default: [], Type: array.

$("#autocomplete").selectAutocomplete({
   data: [],
});
minLength

Define the minimum length for auto completion. Default: 3, Type: Number/int.

$("#autocomplete").selectAutocomplete({
   minLength: 3,
});
dropdownAttrs

The dropdown attribute. Default: { class: “dropdown” }, Type: Object.

$("#autocomplete").selectAutocomplete({
   dropdownAttrs:	{ class: "dropdown" },
});
onSelect & onCancel

The custom callback functions that will execute on select and on cancel. Default, null, Type: function.

$("#autocomplete").selectAutocomplete({
   onSelect: function{
      // code to run
     }
   onCancel: function{
      // code to run
     }
});