SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bootstrap Typeahead

    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

    PHP Code:
    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    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:

    HTML Code:
    <!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-bo...p/typehead.php

  3. #3
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •