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

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

The Death of the Stubborn PM

Product Management is undergoing a seismic shift, much like programming did when compilers replaced assembly language or when Agile dismantled waterfall dogma. Stubborn PMs who cling to outdated rituals—like treating PRDs as sacred texts—will fade into irrelevance. The future belongs to those who embrace AI as a collaborator, not a threat.   AI Will Disrupt the Tactics, Not the Thinking   Historically, tools abstracted manual work: compilers automated code translation, A/B testing replaced gut-driven debates. Similarly, AI will automate tactical PM tasks—data aggregation, routine prioritization, even drafting specs. But this is liberating, not limiting.   The stubborn PM obsesses over *how* to write a PRD; the adaptive PM focuses on *why* a product should exist. AI can’t replicate judgment calls that demand intuition: interpreting unmet customer needs, balancing ethics with growth, or navigating ambiguity when data is sparse. As AI handles execution, the PM...
Read more

From Stubborn to Smart: How I Learned to Use AI as a PM

Listen to the article in podcast format on PM-AI Diaries channel on Spotify! Ever since I published "The Death of the Stubborn PM" back in February, my inbox has been buzzing with one big question: “Okay, I get that AI is the future for product managers—but how do I actually use it?” It’s a fair ask. In that piece, I argued that PMs who resist AI are doomed to fade away, like dinosaurs refusing to evolve. As I wrote, “The stubborn PM who clings to old ways will die out, replaced by those who harness AI’s power while leaning into what makes us human.” Now, people want the playbook. So, let’s walk through it with a story—my own journey of figuring this out, backed by some sharp insights from MIT Sloan’s "When Humans and AI Work Best Together—and When Each Is Better Alone" . The Wake-Up Call Picture me a few months back: a PM buried in work, juggling a dozen tasks, and feeling like there weren’t enough hours in the day. Writing user stories, sketching ideas, track...
Read more