Create Autocomplete Search using Typeahead Js

258 views 4 months ago Javascript

Typeahead.js is simple javascript library developed and used by Twitter for simple user search experice. Typeahead.js predicts words input by user and returns results from the data.

Typeahead.js uses the data prefetched from javascript array as well as from remove server. You can also use multiple remove source to get results.

In this article, we will go through on how to implement Typeahead.js in simple way.

Typeahead.js also uses jQuery library, so we will also use jQuery CDN file. Now download library from github or use the link as CDN file. Add these html tags before </body> tag.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

Add input tag where you want to implement Typehead.js

<input class="typeahead" id="search" type="text" placeholder="States of USA">

Now put the below script code after the typehead.js loaded.

<script type="text/javascript">
    var matchString = function(data) {
         return function findMatches(q, cb) {
               var matches, substringRegex;
               matches = [];
            substrRegex = new RegExp(q, 'i');
            $.each(data, function(i, str) {
                 if (substrRegex.test(str)) {
                    matches.push(str);
                  }
            });
            cb(matches);
          };
    };
    var states = [
        'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
        'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
        'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
        'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
    ];
    $('#state').typeahead({
         hint: true,
         highlight: true,
         minLength: 1
    },{
          name: 'states',
          source: matchString(states)
    });
</script>

In the above code state variable is the data and matchString() function returns the predicted data. Here is the full code how to implement Typehead.js with bootstrap.

<!DOCTYPE html>
<html>
    <head>
        <title>State search</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container text-center">
          <h1>State search</h1>
            <div class="form-group" id="remote">
                <input type="text" class="form-control typeahead" id="state" name="state">
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
        <script type="text/javascript">
            var matchString = function(data) {
                 return function findMatches(q, cb) {
                       var matches, substringRegex;
                       matches = [];
                    substrRegex = new RegExp(q, 'i');
                    $.each(data, function(i, str) {
                         if (substrRegex.test(str)) {
                            matches.push(str);
                          }
                    });
                    cb(matches);
                  };
            };
            var states = [
                'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
                'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
                'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
                'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
                'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
                'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
                'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
                'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
                'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
            ];
            $('#state').typeahead({
                 hint: true,
                 highlight: true,
                 minLength: 1
            },{
                  name: 'states',
                  source: matchString(states)
            });
        </script>
    </body>
</html>

Remote server

To use remote server data, you need to use Bloodhound, the typeahead.js suggestion engine. Bloodhound is also used when more complex data handling with functionalities like prefetching, caching, fast response and remote data. Here is the example how to fetch data from remote server using query.

Below is the example of predict serach from remote server.

<!DOCTYPE html>
<html>
    <head>
        <title>Film search</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container text-center">
          <h1>Film search</h1>
            <div class="form-group" id="remote">
                <input type="text" class="form-control typeahead" id="film" name="film">
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
        <script type="text/javascript">
            var users = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                prefetch: 'https://twitter.github.io/typeahead.js/data/films/post_1960.json',
                remote: {
                    url: 'https://twitter.github.io/typeahead.js/data/films/queries/%QUERY%.json',
                    wildcard: '%QUERY%'
                }
            });
            $('#film').typeahead(null, {
                 name: 'best-pictures',
                 display: 'value',
                 source: users,
                  templates: {
                    empty: [
                        '<div class="list-group search-results-dropdown"><div class="list-group-item">No records found.</div></div>'
                    ],
                    header: [
                        '<div class="list-group search-results-dropdown">'
                    ],
                    suggestion: function (data) {
                        return '<a target="_blank" href="https://www.google.co.in/search?q=' + data.value + '" class="list-group-item">' + data.value + '</a>'
                    }
                }
            });
        </script>
    </body>
</html>

Note: If you want to pass input string through get query, then you can set it something like below.

remote: {
    url: 'https://hackthestuff.com/search?keyword=%QUERY%',
    wildcard: '%QUERY%'
}

This way, you can simply add autopredict search box to improve user experience. I hope you will like this article.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]