Bootstrap Typeahead

JavaScript
1

is there a way to get bootstrap’s typeahead to only match the first characters of a word? Right now it’s matching any instance of the entered characters anywhere in each word, and I only want it to match the beginning.

For instance, if my array is

array("roof company", "company de roofing", "experts in roofing")

and I type in “roof” I only want “roof company” to appear.

Does this make sense?

2

Hi there,

Yeah, sure you can do this.
As you probably know, can call the typeahead via JavaScript and use it’s different options to add functionality.
The option we’re interested in here is called matcher and it determines whether a query matches an item. It takes a single argument, i.e. the item against which to test the query. and the current query is accessed from within it via this.query. It returns a boolean true if the query is matched, its data type is function and by default it is case insensitive.

Therefore, what I would do, is take the array of subjects to compare against (e.g. [‘roof’, ‘roofer’, ‘a roof company’, ‘company de roofing’, ‘experts in roofing’]).
I would then split each element of the array at a space and compare it with the query. If you encounter a direct match, then you return true.

An example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Bootstrap typehead with options example by w3resource</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="well">
      <input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
    </div>
    
    <script>
      var subjects = ['roof', 'roofer', 'a roof company', 'company de roofing', 'experts in roofing']; 
      $('#search').typeahead({
        source: subjects,
        matcher: function(item) {
          var words = item.split(" ");
          for(var i = 0, len = words.length; i < len; i++){
            if (words[i] === this.query){
              return true;
            }
          }
        }
      })
    </script>
  </body>
</html>

I hope that helps you.

Ref: http://www.w3resource.com/twitter-bootstrap/typehead.php

3

Thanks for the help!