Introduction
In this blog, we will see how to implement an autocomplete input box using "Typeahead" jQuery plugin.
Typeahead is an open source jQuery based autocomplete plugin developed by Twitter. You can find more details and examples of the plugin here.
Now, we will see how to integrate it in our HTML input box.
For example, we can consider an input box for searching an employee's name.
- <div style="width: 280px;"> Employee name :
- <input id="inputbox" class="typeahead" type="text" placeholder="Enter Name" style="padding: 5px 10px;
- margin-top: 10px; border: 1px solid #c3c3c3; width: 260px; border-radius: 5px;"> </div>
Now, we should reference the below JS / CSS files in our page head for this Typeahead autocomplete plugin to work.
- <link href="typeahead.css" rel="stylesheet" type="text/css" />
- <script src="jquery.min.1.11.1.js" type="text/javascript"></script>
- <script src="typeahead.jquery.js" type="text/javascript"></script>
Now, initialize the input box with Typeahead.
- <script type="text/javascript">
- $(function() {
- $('#inputbox').typeahead({
- minLength: 3,
- highlight: true
- }, {
- name: 'autofill',
- source: substringMatcher(getdata()),
- limit: 10
- });
- });
- </script>
Explanation of the options passed in the above script
- min-length
It is the minimum number of characters to be entered in input box for the search to work.
- highlight
Whether the searched text should be highlighted in results or not.
- limit
The maximum number of results to be shown in search result box.
- source
This is the most important option in typeahead.jquery.js. We have to set the source for searching during initialization of input box with Typeahead.
In the above example, we have used two functions as value for source.
The first one is getdata().
- <script type="text/javascript">
- function getdata() {
- var datas;
- $.ajax({
- url: 'jsondata.aspx',
- async: false
- }).done(function(data) {
- datas = data;
- });
- return datas;
- }
- </script>
This function contains an AJAX method which calls a page and fetches complete employees names in JSON format and returns that data.
The AJAX page contains the below code on page load.
- protected void Page_Load(object sender, EventArgs e) {
- Response.AddHeader("content-type", "application/json");
- Response.Write("[\"Rajeev\",\"Sanjay\",\"Samuel\",\"Samson\",\"Ameer\",\"Anand\",\"Sania\",\"Sanal\",\"Rekha\",\"Sanju\",\"Sanuja\"]");
- }
Now, this data is passed to the method substringMatcher();
- <script type="text/javascript">
- var substringMatcher = function(strs) {
- return function findMatches(q, cb) {
- var matches, substringRegex;
-
- matches = [];
-
- substrRegex = new RegExp(q, 'i');
-
-
- $.each(strs, function(i, str) {
- if (substrRegex.test(str)) {
- matches.push(str);
- }
- });
- cb(matches);
- };
- };
- </script>
This is the most important method in Typeahead, that searches for the entered string in complete data array and returns the matching results.
Now, we can run our page.
Now, enter some characters of employee name. We can see the results in the result box, as below.
We can edit the typeahead.css file for changing the look and feel of the search box accordingly.
Additional options
We can call any script while selecting one result from the result box, using the below script.
- <script type="text/javascript">
- $(function() {
- $('#inputbox').bind('typeahead:selected', function(obj, data) {
-
- });
- });
- </script>
In the above script, the variable "data" will give us the selected item.
Summary
In this article, we have learned how to implement an autocomplete input box in our website using the open source Typeahead jQuery plugin.
Hope it will be helpful!