This time I will share jQuery Plugin and tutorial about jQuery Plugin For Adding Autocomplete To Text Input – Autocomplete.js, hope it will help you in programming stack.
Yet another simple jQuery autocomplete plugin which provides a dropdown list populated with suggestions while you type something in an input field.
How to use it:
1. Load the autocomplete.css in the head, and the autocomplete.js at the bottom of the web page which has jQuery library installed.
1 |
<link href="autocomplete.css" rel="stylesheet" type="text/css"> |
2 |
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script> |
3 |
<script src="autocomplete.js"></script> |
2. Create an empty DIV that will be served as the container for the text input.
3. Create another empty DIV to output the selected strings.
1 |
<div id="message">Selection</div> |
4. Create an array of words for the auto suggestions.
1 |
var words = ['at', 'boat', 'bear', ...]; |
5. Call the plugin.
1 |
$('#demo').autocomplete({ |
3 |
onSubmit: function(text){ |
4 |
$('#message').html('Selected: <b>' + text + '</b>'); |
6. Available plugin options.
01 |
$('#demo').autocomplete({ |
07 |
placeholder: 'Search', |
20 |
onSubmit: function(text){}, |
Changelog:
v1.0.1 (2019-09-12)
This awesome jQuery plugin is developed by lorecioni. For more Advanced Usages, please check the demo page or visit the official website.
