Easy Autocomplete & Typeahead Plugin For jQuery - showSuggestion

showSuggestion is a lightweight and configurable jQuery autocomple and typeahead plugin which allows users to quickly find and select items from suggestion list as they type.

How to use it:

1. Add references to the required JavaScript and CSS files to the web page.

<link rel="stylesheet" href="showsuggestion.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="showsuggestion.js"></script>

2. Prepare your data (key-value pairs) for the suggestion list.

var suggustionList = [
    {
      "fname":"Kumaravel", 
      "lname" : "Palanisamy", 
      "email": "[email protected]", 
      "id": 1
    },
    {
      "fname":"Test", 
      "lname" : "Test", 
      "email": "[email protected]", 
      "id": 2
    },
    {
      "fname":"Sample", 
      "lname" : "Sample", 
      "email": "[email protected]", 
      "id": 3
      },
    {
      "fname":"Demo", 
      "lname" : "Demo", 
      "email": "demo@demo.com", 
      "id": 4
    }
    ...
];

3. Config the showSuggestion plugin with the following options.

var config = {};
config["data"] = suggustionList;
config["attr"] = ["id"];
config["searchBy"] = ["fname", "lname", "email"];
config["suggFormat"] = "$0 $1 - $2";
config["displayFormat"] = "$0 $1";

4. Attach the plugin to your input field and done.

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

$(".demo").showSuggestion(config);

---

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