Autocomplete jQuery plugin to create smart autocompletion and for displaying a suggestion list that enables the users to complete text in sequence while typing.
autocomplete input, html autocomplete from list, autocomplete input html, autocomplete attribute, autocomplete search
How to make use of it:
1. Load the required jQuery library and jQuery caret plugin within the HTML doc.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.caret-1.5.2.min.js"></script>
2. Download and load the jQuery Autocomplete.js script after the jQuery library.
<script src="autocomplete.js"></script>
3. Active the plugin on desired input area.
$('.target').autocomplete();4. Modify or override the predefined recommendations.
$('.target').autocomplete({
values: [
[
'java',
'javascript',
'jubilee'
],
[
'is',
'isn\'t'
],
[
'good',
'bad'
],
[
'and'
]
],
});5. More configuration choices and callbacks with default values.
$('.target').autocomplete({
collection: 'languages',
separator: 'and',
offset: {
y: 36,
x: 6
},
handler: function () {},
select: function () {
return true;
}
});6. The default HTML template for the suggestion checklist.
var _$display = $('<div class="autocomplete" style="z-index:9999999;display:none;position:relative; background-color: white;border: 1px solid #999;top:' + settings.offset.y + 'px;left:' + settings.offset.x + 'px; max-height: 40%; max-width:300px; width:auto; overflow-y: auto;overflow-x: none;"></div>');Smart jQuery Autocomplete Plugin For Input Fields, smart autocompletion Github
See Demo And Download
Official Website(lcavadas): Click Here
This superior jQuery/javascript plugin is developed by lcavadas. For extra Advanced Usages, please go to the official website.