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.