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
}
});
|
Similar Code Snippets:
Silky Smooth Checkbox Toggles Using SVG.js
Textarea Code Editor With Syntax Highlighting
jQuery Select all Checkboxes in Table Column
CSS Only Toggle Button With Smooth Transition
Typing and Erasing Animation CSS and JavaScript
JavaScript Custom Select Dropdown with Description
JavaScript Text Typing Animation
Increment and Decrement Counter in JavaScript
Highlight Text to Specific Range in JavaScript
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.