jQuery Table Based Autocomplete Plugin - tAutocomplete

tAutocomplete is a jQuery autocomplete plugin that provides suggestions from a multi-column table in a dropdown list while the visitors type into the input field.

How to use it:

1. Load the jQuery javascript library together with jQuery tAutocomplete plugin's Javascript and CSS in your web page.

<link rel="stylesheet" href="tautocomplete.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="tautocomplete.js"></script>

2. Create an input field and initialize the plugin on it.

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

<script>
$(document).ready(function () {
  var myData = $("#demo").tautocomplete();
});
</script>

3. Autocomplete settings.

// Table width
width: "500px", 

// e.g. ['Country', 'Code', 'Capital']
columns: [], 

// The first column is always considered to be ID and hidden by default (can be changed just be setting hide:[false]).
// Other columns can also be shown/ hidden based on the settings
hide: [false],

// onChange callback
onchange: null,

// Message to be displayed when no records found
norecord: "No Records Found", 

dataproperty: null,

// Allowed inputs in the textbox can be mentioned using Regex
regex: "^[a-zA-Z0-9\b]+$", 

// data object. see demo page.
data: null,

// The default text displayed whenever no choice has been selected
placeholder: null,

// Three themese are available curretly, 1. default, 2. classic and 3. white
theme: "default",

ajax: null,

// Delays searching based on the mili seconds set.
delay: 1000,

// Highlights the search word in the result window. 
// Highlight takes 'class name' as argument, define your class and assign classname to hightlight property. 
highlight:'word-highlight'

Change log:

2015-11-30

• added more options

---

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