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: January 19, 2024
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
     }
});

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...