jQuery Autocomplete Input Field with Tab Key - Tab Complete

File Size: 10.2 KB
Views Total: 4796
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Autocomplete Input Field with Tab Key - Tab Complete

Tab Complete is a simple jQuery plugin that makes the Tab key able to select multiple items from a preset autocomplete list while typing into an input field.

How to use it:

1. Load the jQuery tab complete plugin after jQuery library at the end of the Html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.tabComplete.js"></script> 

2. Create a normal text input field on the page.

<input id="demo" type="text" autofocus>

3. Call the plugin on the input field and build your own autocomplete list as JSON data.

<script>
$(function() {

$("#input").tabComplete([
"jQuery",
"jQueryPlugin",
"jQueryCom",
"jQueryScriptNet",
]);

});
</script>

4. Default options.

var options = {
after: "",
arrowKeys: false,
caseSensitive: false,
hint: "placeholder",
minLength: 1
};

Change log:

v1.3.1 (2014-06-04)

  • supports textarea and hinting methods.

This awesome jQuery plugin is developed by erming. For more Advanced Usages, please check the demo page or visit the official website.