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.

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

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

$("#autocomplete").selectAutocomplete({
   cancelButtonText: "Remove",	
});
dataThis option used to submit an array (of suggestion text) to the plugin. Default: [], Type: array.

$("#autocomplete").selectAutocomplete({
   data: [],
});
minLengthDefine 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 & onCancelThe 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

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