Autocomplete Search using Bootstrap Typeahead JS

Websolutionstuff | Jun-09-2021 | Categories : CSS Bootstrap

In this example we will see autocomplete search using bootstrap typeahead js.Typeahead search is a method for progressively searching for and filtering through text.

Here we will see how to autocomplete search using typeahead js. It is also sometimes known as autocomplete, incremental searchsearch-as-you-type, inline search, instant search and word wheeling. So,let's start bootstrap 4 autocomplete textbox using typeahead search example.

Example: 

<div class="container">

<h3>Autocomplete Search using Bootstrap Typeahead JS - websolutionstuff.com</h3>
<hr>
    
<table id="example" class="table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Json</td>
            <td>System Admin</td>
            <td>320,800</td>
        </tr>
        <tr>
            <td>Philips</td>
            <td>Accountant</td>
            <td>170,750</td>
        </tr>
        <tr>
            <td>Stephon</td>
            <td>Data Enrty</td>
            <td>6,000</td>
        </tr>
        <tr>
            <td>Gorge</td>
            <td>Software Engineer</td>
            <td>32,000</td>
        </tr>
        <tr>
            <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>217,500</td>
        </tr>
        <tr>
            <td>Jenette Caldwell</td>
            <td>Development Lead</td>
            <td>345,000</td>
        </tr>
        <tr>
            <td>Yuri Berry</td>
            <td>Chief Marketing Officer</td>
            <td>$675,000</td>
        </tr>
       
       
    </tbody>
</table>

</div>

 

 

Add JS :

$(document).ready(function() {
   var dataSrc = [];

   var table = $('#example').DataTable({
      'initComplete': function(){
         var api = this.api();

         // Populate a dataset for autocomplete functionality
         // using data from first, second and third columns
         api.cells('tr', [0, 1, 2]).every(function(){
            // Get cell data as plain text
            var data = $('<div>').html(this.data()).text();           
            if(dataSrc.indexOf(data) === -1){ dataSrc.push(data); }
         });
         
         // Sort dataset alphabetically
         dataSrc.sort();
        
         // Initialize Typeahead plug-in
         $('.dataTables_filter input[type="search"]', api.table().container())
            .typeahead({
               source: dataSrc,
               afterSelect: function(value){
                  api.search(value).draw();
               }
            }
         );
      }
   });
});

 

Output : 

autocomplete search using typeahead js example

 

Recommended Post
Featured Post
How to Convert Excel File into JSON in Javascript
How to Convert Excel File into...

Today in this small post i will show you how to convert excel file into json in javascript. Many time we have requi...

Read More

Jul-07-2021

Remove/Hide Columns While Export Data In Datatable
Remove/Hide Columns While Expo...

In this article, we will see remove or hide columns while exporting data in datatable. When we are using jquery dat...

Read More

Aug-24-2020

How To Remove index.php From URL In Laravel 9
How To Remove index.php From U...

If you're a developer, you're likely to have frustration with "index.php" cluttering up your website&#...

Read More

Jan-13-2023

Laravel 9 Subquery In Where Condition
Laravel 9 Subquery In Where Co...

In this article, we will see the laravel 9 subquery in where condition. You can learn how to create subquery in laravel...

Read More

Oct-11-2022