Fast Autocomplete Plugin For Bootstrap 4 - typeahead.js

File Size: 165 KB
Views Total: 2404
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fast Autocomplete Plugin For Bootstrap 4 - typeahead.js

This is the upgraded and jQuery version of Twitter's typeahead.js library which provides a fast, performant auto-complete functionality for Bootstrap 4 based web app.

How to use it:

1. Load the main JavaScript file bootstrap-typeahead.js after jQuery & Bootstrap's JS files.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>

2. Attach the plugin to the input field and specify the dataset as follows:

<input type="text" class="form-control" id="field-state" placeholder="State">
document.addEventListener('DOMContentLoaded', function(){
  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);
      }
  }

  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'
  ];

  $('#field-state').typeahead(
    {
      hint: true,
      highlight: true,
      minLength: 1,
    },
    {
      name: 'state',
      source: substringMatcher(states)
    })
})

3. Refer to the Twitter's typeahead.js official website for full documentation.

4. It also supports the bloodhound library, which provides robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data.


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