Friday, September 26, 2014

Twitter typeahead.js with BootStrap 3, AJAX, and CoffeeScript

I ran into a few problems today while deploying Twitter's typeahead.js.  I had dynamic typeahead data that I needed to pull from a URL (like an AJAX request), and I also needed to integrate typeahead with Bootstrap 3 (which breaks almost all of TypeAhead's CSS, and screws up bootstrap's form layout).  I also wanted to use BloodHound but have it search any part of the word (not just the beginning of the word), and have typeahead.js submit the form when an item was selected by clicking.  This project's JavaScript is actually written as CoffeeScript, so the last thing I had to do was convert working JavaScript to CoffeeScript.

The first thing I sorted out was the CSS.  Adding the following corrected all of my CSS issues (note: not all of this is CSS I wrote; much of it was pulled from various other BootStrap/typeahead solutions online, but it is tweaked as none of those worked 100% for me):

/* Twitter typeahead compatibility fixes */
.twitter-typeahead {
  float: left;
  margin-right: 3px;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
}

.twitter-typeahead .tt-hint {
  color:#a1a1a1;
  padding: 6px 12px;
  border:1px solid transparent;
}

.twitter-typeahead .tt-query {
  border-radius: 4px!important;
  border-top-right-radius: 0!important;
  border-bottom-right-radius: 0!important;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -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);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

.tt-cursor {
  cursor: pointer;
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}
After my form was looking normal again, I had to get typeahead working. After a lot of trial and error and converting it to CoffeeScript, here is what I had (my API URL was at /v1/devices/list). Another note, not all of this is my original code, it is bits and pieces of javascript from around the web which I cobbled together and converted to CoffeeScript:

typeahead = ->
  devices = new Bloodhound({
    datumTokenizer: (d) ->
      test = Bloodhound.tokenizers.whitespace(d.value)
      $.each(test, (k,v) ->
        i = 0
        while( (i+1) < v.length )
          test.push(v.substr(i,v.length))
          i++
      )
      return test
    ,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
      url: '/v1/devices/list',
      filter: (list) ->
        $.map(list, (device) -> { value: device })
    }
  })

  # kicks off the loading/processing of `local` and `prefetch`
  devices.clearPrefetchCache()
  devices.initialize()


  # passing in `null` for the `options` arguments will result in the default
  # options being used
  $('.typeahead').typeahead(
    { 
      highlight: true,
    },
    { 
      name: 'devices',
      # `ttAdapter` wraps the suggestion engine in an adapter that
      # is compatible with the typeahead jQuery plugin
      source: devices.ttAdapter()
    },
  )
  $('input.typeahead').bind("typeahead:selected", -> $("form").submit() )

I hope this helps someone else out there!

17 comments:

  1. Responsive Web Design Twitter Bootstrap Mobile First Development Bootstrap Training Bootstrap Training in Chennai Bootstrap Training in Chennai Bootstrap Online Training Bootstrap Online Training JavaScript Training Courses JavaScript Training Courses

    ReplyDelete
  2. Your method allows you to find a solution at a certain options. We should use the special parameters for this operation to be successful.

    ReplyDelete
  3. If you understand all the things that are written above you are ra real professional of your business.

    ReplyDelete
  4. Thanks a lot for this post! If you need additional information on this topic, follow the link.

    ReplyDelete
  5. This method allows you to choose a solution that can now be very easily and without problems to pay at home.

    ReplyDelete
  6. incredibly cool site where you can always find a lot of the most relevant and incredibly useful information for further research.

    ReplyDelete
  7. The first casino - Kookoo.KR
    In the 퍼스트 카지노 years クイーンカジノ since, there were casino games made available to players in many countries. Some 카지노 of the best were: Blackjack, Craps, Roulette,

    ReplyDelete
  8. That mentioned, in case your major purpose half in} poker in Seoul is amusement, not profit, then the poker site on the Seven Luck Casino is a very nice and handy place to play. If you’re not shut sufficient to walk, a most handy way to get to the Seven Luck is by taking the extraordinarily safe, clean, efficient, inexpensive, frequent, and well-signed-in-English subway. The nearest cease to the casino is the Samseong Station on Line 2, only 메리트카지노 about half a block from Seven Luck. Even if you're not staying near a Line 2 cease, the subway system is totally integrated and easy to understand, making any cease on the in depth line handy for a experience to this casino.

    ReplyDelete
  9. Nice article thanks for share Great information. Experience the power of online English tuition classes to boost your language proficiency! Join our expert-led, interactive sessions designed to improve your grammar, vocabulary, comprehension, and communication skills.
    For more info visit Online English Tuition

    ReplyDelete
  10. It’s really a cool and helpful piece of info. I am happy that you simply shared this. Join Ziyyara Edutech's dynamic and interactive online tuition program tailored specifically for Class 11 students.
    For more info Contact us: +91-9654271931, +971-505593798 or visit Online tuition for class 11

    ReplyDelete