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=""></script>

<!-- Textbox Autocomplete Assets -->
<link href="css/" rel="stylesheet" type="text/css">
<script src="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" />

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" }

          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

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

   showCancelButton: true,

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

   cancelButtonText: "Remove",	

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

   data: [],

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

   minLength: 3,

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

   dropdownAttrs:	{ class: "dropdown" },
onSelect & onCancel

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

   onSelect: function{
      // code to run
   onCancel: function{
      // code to run

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.