Javascript Autocomplete Textbox From Array

Category: Text & Input | December 15, 2019
Javascript Autocomplete Textbox From Array
Author: art-mironoff
Official Page: Go to Website
Last Update: December 15, 2019
License: MIT

A lightweight plugin that helps you to build Autocomplete Textbox From Array with the help of Javascript and jQuery. It also provides text suggestion that helps the user to easily select the values.

This plugin lets you create the autocomplete function for input type text or Textarea elements. You simply need to define the array value of auto-completion terms and the plugin will show the volume under the text input.

Furthermore, it compatible with the jQuery 1.8.0+ and there are no dependencies needed except the jQuery library. You can use the plugin into your commercial project because it released under the MIT License.

How to Use jQuery Autocomplete Textbox Plugin

First, you need to 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>

After that, you simply need to create an input type text element with a unique id and wrap it into div (if you want to adjust it). You can also add a destroy button if you want allow the user to clear the input field.

<div class="wrap">
  <input id="autocomplete" type="text" name="search" />
  <button id="destroy-btn" onclick="destroy()">Destroy select</button>
</div>

Now, we will define an array in jQuery document ready function that contains objects of your autocomplete text (in the name field) and a unique id.

Let’s call the plugin and put your array in plugin’s data option.

$(document).ready(function() {
  $("#autocomplete").selectAutocomplete({
    showCancelButton: true,
    cancelButtonText: "Remove",
    data: [
      { id: "id111", name: "1111" },
      { id: "id222", name: "2222" },
      { id: "id333", name: "3333" },
      { id: "id444", name: "4444" },
      { id: "id555", name: "5555" },
      { id: "id666", name: "6666" },
      { id: "id777", name: "7777" },
      { id: "id888", name: "8888" },
      { id: "id999", name: "9999" }
    ],
    minLength: 3,
    onSelect: function(e, id, value) {
      console.log("Item selected! Id: " + id);
    },
    onCancel: function (e) {
      console.log("Cancel button clicked!");
    }
  });
});
function destroy() {
  $("input").selectAutocomplete('destroy');
}

Advanced Options to Create Autocomplete Textbox

The following are some advanced configuration options to create a javascript autocomplete textbox from the array.

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

$("#autocomplete").selectAutocomplete({
   showCancelButton: true,
});
cancelButtonText Define the text for the cancel button. Default: “Remove”, Type: String.

$("#autocomplete").selectAutocomplete({
   cancelButtonText: "Remove",	
});
data This option used to submit an array (of suggestion text) to the 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
     }
});

The plugin is ready to use. You can customize its design by editing the CSS and setting the options.

You May Also Like

Leave a Comment