Skip to main content

Twitter typehead.js basic example with token field.

A simple example for twitter typehead.js.

The server should return an array of type:

[ { name: "asas", value: "1234" }, { name: "asas", value: "121212" } ]


Include following CSS and js:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="tokenfield-typeahead.css" rel="stylesheet">
<link href="bootstrap-tokenfield.css" rel="stylesheet">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js" ></script>

     <script src="bootstrap-tokenfield.js" ></script>

Style ur typeahead:

      <style>
.tt-query,
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-dropdown-menu {
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0097cf;

}

JS for intializing typehead,  tokenizer and bloodhound:

 <script>
      $(function() {
      
  var engine = new Bloodhound({
  datumTokenizer: function(d) {
  return Bloodhound.tokenizers.whitespace(d.value); 
  },
  queryTokenizer: function(d) {
  return Bloodhound.tokenizers.whitespace(d.name); 
  },
  prefetch: '/contact/fetch?host=lifesize.com&user=bsaraf&password=testing!!123&term=S',
  remote: '/contact/fetch?host=lifesize.com&user=bsaraf&password=testing!!123&term=%QUERY'
});
 
engine.initialize();
 
   $('#exampleInputEmail1').tokenfield({
  typeahead: [null, {  source: engine.ttAdapter() }]
});
   $('#exampleInputEmail1').tokenfield();
   $(document).ajaxSend(function(event, jqXHR, settings) {
       console.log("Loading");
   $('.tt-hint').css('background-repeat', 'no-repeat');
   $('.tt-hint').css('background-position', '98%');
   $('.tt-hint').css('background-image', 'url("http://primefaces-rocks.appspot.com/design/ajaxloading.gif")');
   });

   $(document).ajaxComplete(function(event, jqXHR, settings) {
      console.log("Loaded.");
   $('.tt-hint').css('background', '');
   });
});
 </script>

And a simple html:

<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email">


And what you get is:




The Bloodhound docuementation is available at: https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote


I had to do dynamic change the url to fetch results in bloodhound based on some paramters.
This I achieved by:


var engine = new Bloodhound({
           datumTokenizer: function(d) {
                   return Bloodhound.tokenizers.whitespace(d.value); 
           },
           queryTokenizer: function(d) {
                   return Bloodhound.tokenizers.whitespace(d.name); 
           },
           prefetch: '/contact/fetch?host=lifesize.com&user=bsaraf&password=testing!!123&term=S',
           remote:{
                        'url' : '/contact/fetch?term=%QUERY',
                        'replace' : function(url,query) {
                                var q = '/contact/fetch?host='+$('#exampleInputHostName').val()+'&user='
                                                + encodeURIComponent($('#exampleInputUser').val())
                                                + '&password='
                                                + encodeURIComponent($('#exampleInputPassword1').val())
                                                + '&term='
                                                + query;
                                return q;
                        }
          }

        });


If you see the above code remote has a new replace method which fetched the values from input  fields and appends them to url. Note, here method takes query as argument to give the exact term typed in by user.


Popular posts from this blog

Watch Live cam on Google!!!!!

Ahhh!!! type certain string in google search bar above and it would bring up the network live cam into your browser. These can be anything from CCTV or webcams... There are lots of string.. i suggest a few down below use them to begin with.. And do come up with your own.. and leave a comment to the post... And ya.. if u come up with something interesting then don forget to share it.. Strings::: Axis cameras: "adding live video to one of your own pages a very easy task with an AXIS 2100 Network Camera" ' google ' intile:"Live view - / - AXIS" ' google ' "Your browser has JavaScript turned off.For the user interface to work effectively" ' google ' inurl:indexFrame.html axis ' google ' "Live web imaging unleashed" ' google ' MOBOTIX cameras: (intext:"MOBOTIX M1" | intext:"MOBOTIX M10") intext:"Open Menu" Shift-Reload ' google ' JVC cameras: "(c)copyright 199...
Read more

Most expensive product on Amazon India By Category

Amazon India today has become the most visited e-commerce site in India. So, I decided to analyze the most expensive products that Amazon India Sells across various category. So lets start. Book worth Rs 53,46,000.00 This is quiet modest. I think its a must in every library! DVD worth Rs 40,045.23 My kids are gonna die uneducated :( A Flip Cover worth Rs 255,255.00 I would get around 40 actual Micromax Juice phone at the same price. A pen worth Rs 1,700,000.00 "No doubt a pen is mightier (worthier) then a sword" Telescope worth Rs 896,000.00 This might actually be a fair price. Should understand technical part of it to comment. Help! Spoons worth Rs 2,183,731.00 I might by a house with a kitchen at the same price. Though each spoon would just cost you mere 33,000. Thats a relief! A Game worth Rs 868,434.00 That might be correct again, with import duty on all. I don't know. MultiGym worth Rs...
Read more

Why India Hasn’t Built Its GPT Moment (Yet)

India has the world’s third-largest startup ecosystem, a thriving developer base, and a mobile-first population larger than the US and Europe combined. Yet, no GPT-4. No DeepMind. No Amazon-style platform. Why? Innovation Isn’t Accidental—It’s Engineered The Zerodha Daily Brief recently asked why India hasn’t built a global product company like Apple. The key argument: India isn’t building for the world. It’s solving for local constraints, scale, and affordability—but global scale requires deep IP, design, and tech differentiation. It’s not just about software, it’s about systems thinking. More importantly, it answers the question: Why do countries innovate? The answer isn’t just genius or ambition—it’s incentives and ecosystems. The U.S. Defense Department, for example, accounted for nearly 70% of federal R&D funding during the Cold War. China has pumped billions into semiconductors and AI with long-term national alignment. These aren’t short-term bets—they are strategic, delibe...
Read more