Create Autocomplete Search using Typeahead Js

2414 views 2 years ago

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/bootstrap@4.6.0/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/bootstrap@4.6.0/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.

Google Maps JavaScript API Get Travel Distance Between Points

In the process of getting distance between two distance co-ordinates, you may find distance by using geometry and algebra. But that's not enough. We may need to find actual travel distance between...
How to check whether a variable is null in PHP

Use the PHP is_null() function You can use the PHP is_null() function to check whether a variable is null or not. Let's check out an example to understand how t...
How to integrate Highcharts.js in web appication

Chart in the web application is more essentials when it comes in analytic tools. It is more descriptive than numbers. There are many Javascript libraries provides Charts Google charts, AM charts etc....
How to populate dropdown list with array values in PHP

Use the PHP foreach loop You can simply use the PHP foreach loop to create or populate HTML <select> box or any dropdown menu form the values of an array. L...
Node.js MySQL Create table into Database Server

This article will guide you to how to create table into MySQL database server from Node.js. First create connection between MySQL server and Node.js. After database created, use conn.query(...

LaravelCode

Create Autocomplete Search using Typeahead Js

Remote server

Random Articles

Google Maps JavaScript API Get Travel Distance Between Points

In the process of getting distance between two distance co-ordinates, you may find distance by using geometry and algebra. But that's not enough. We may need to find actual travel distance between...

How to check whether a variable is null in PHP

Use the PHP is_null() function You can use the PHP is_null() function to check whether a variable is null or not. Let's check out an example to understand how t...

How to integrate Highcharts.js in web appication

Chart in the web application is more essentials when it comes in analytic tools. It is more descriptive than numbers. There are many Javascript libraries provides Charts Google charts, AM charts etc....

How to populate dropdown list with array values in PHP

Use the PHP foreach loop You can simply use the PHP foreach loop to create or populate HTML <select> box or any dropdown menu form the values of an array. L...

Node.js MySQL Create table into Database Server

This article will guide you to how to create table into MySQL database server from Node.js. First create connection between MySQL server and Node.js. After database created, use conn.query(...

Advertise

Create Autocomplete Search using Typeahead Js

Remote server

Random Articles

Google Maps JavaScript API Get Travel Distance Between Points

In the process of getting distance between two distance co-ordinates, you may find distance by using geometry and algebra. But that&#39;s not enough. We may need to find actual travel distance between...

How to check whether a variable is null in PHP

Use the PHP&nbsp;is_null()&nbsp;function You can use the PHP&nbsp;is_null()&nbsp;function to check whether a&nbsp;variable&nbsp;is null or not. Let&#39;s check out an example to understand how t...

How to integrate Highcharts.js in web appication

Chart in the web application is more essentials when it comes in analytic tools. It is more descriptive than numbers. There are many Javascript libraries provides Charts Google charts, AM charts etc....

How to populate dropdown list with array values in PHP

Use the PHP&nbsp;foreach&nbsp;loop You can simply use the PHP&nbsp;foreach&nbsp;loop&nbsp;to create or populate HTML&nbsp;&lt;select&gt;&nbsp;box or any dropdown menu form the values of an array. L...

Node.js MySQL Create table into Database Server

This article will guide you to how to create table into MySQL database server from Node.js. First create connection&nbsp;between MySQL server and Node.js. After database created, use conn.query(...

Advertise

In the process of getting distance between two distance co-ordinates, you may find distance by using geometry and algebra. But that's not enough. We may need to find actual travel distance between...

Use the PHP is_null() function You can use the PHP is_null() function to check whether a variable is null or not. Let's check out an example to understand how t...

Use the PHP foreach loop You can simply use the PHP foreach loop to create or populate HTML <select> box or any dropdown menu form the values of an array. L...

This article will guide you to how to create table into MySQL database server from Node.js. First create connection between MySQL server and Node.js. After database created, use conn.query(...