Autocomplete-Table

Autocomplete - Table

One major challenge we faced in autocomplete was to display the data in a tabular format. When there are many rows of information available, it was difficult to display the relevant data of a row next to each other. This forced to develop a JQuery plugin which can display the relevant information in a table format.

Advantages

• Display details in n number of columns
• Filter by keyword
• Keyboard navigation
• Highlight word
• Hide/ Show columns
• Themes

Demo

Search for a country in the below textbox, the plugin displays the country, code and the capital. (Default theme)

The plugin can also be used like a simple dropdown. Search for a country in the below textbox (classic theme)

(White theme)

Ajax

Usage

<script src="javascripts/tautocomplete.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="tautocomplete.css" media="screen" />

The initialization is simple as like any other plugin. Create a textbox and attach the plugin.

var myData = $("#mytextbox").tautocomplete();

Settings

The plugin has following parameters,

Table width, example:

width: 500px

Table columns: Name all the columns of the search result table, example:

columns: ['ID', 'Country', 'Code', 'Capital']

Hide 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, example to hide ID and code:

hide: [true,false,true]

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

placeholder: "Search Country"

Theme: Three themese are available curretly, 1. default, 2. classic and 3. white

theme: "white"

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

highlight: "hightlight-classname"

delay: Delays searching based on the mili seconds set. 1000 ml = 1 second. Default is 1000

delay: 2000

Message to be displayed when no records found, example:

norecord: "No Records Found"

Allowed inputs in the textbox can be mentioned using Regex, default is:

regex: "^[a-zA-Z0-9\b]+$"

Callbacks

onchange: Called whenever the user selects an option in the list, example:

onchange: function () {alert("Selected ID is : myData.id()); }

data: A callback function which passes the information to be displayed in the autocomplete table. In the below example, the textbox is used to search the countries. The function filters the data and passes the relevant information to be shown in the autocomplete-table.

data: function () {

    var data = [{ "id": 1, "country": "Afghanistan", "code": "AFG", "capital": "Kabul" }, 
                { "id": 2, "country": "Albania", "code": "ALB", "capital": "Tirane" },
                { "id": 3, "country": "Algeria", "code": "DZA", "capital": "Algiers" }
                ];

    var filterData = [];

    var searchData = eval("/" + myData2.searchdata() + "/gi");

    $.each(data, function (i, v) {
        if (v.country.search(new RegExp(searchData)) != -1) {
            filterData.push(v);
        }
    });
    return filterData;
}

Ajax

url: Ajax URL, example:

url: "sampledata.json"

type: "GET" or "POST", default is "POST"

type: "GET"

data: parameters to be passed to the url

data: { para1: "John", para2: "Boston",... }

data: function(){var x = { para1: myData2.searchdata(), para2: "Boston"}; return x;}

success: Function to be exexcuted on successful call

success: function (result) { //result is the Ajax result

    var filterData = [];

    var searchData = eval("/" + myData2.searchdata() + "/gi");

    $.each(result, function (i, v) {
        if (v.country.search(new RegExp(searchData)) != -1) {
            filterData.push(v);
        }
    });
    return filterData;
}

Properties

The following Properties are available for the plugin

id: returns the ID of the selected row

myData.id()

text: returns the TEXT of the selected row

myData.text()

searchdata: returns the filter text

myData.searchdata()

isNull: returns true if selection is empty

myData.isNull()

all: returns object literal containing the selection. column name and value converted to key/ value pair and object is returned

myData.all()

Pending

1. Not mobile friendly.
2. Dropdown lists only 15 elements at a time. Scrollbars needs to be added.

Discuss on the Plugin

Support or Contact

Developed by @vyasrao. Please list all bugs and feature requests in the Github issue tracker.
Licensed under the MIT license.