Meteor 0.6.5.1 And Twitter Typeahead.js - (how) Does It Work?

I switched from Twitter Bootstrap 2 to Bootstrap 3 and found myself without typeahead, it's recommended to use Twitter typeahead.js now. The corresponding meteor package seems to b

Solution 1:

I was able to get this to work using the answer from here https://stackoverflow.com/a/18171568/1691147

In regards to how to do it in meteor. In your rendered function, fill up typeahead

    var items = [],
finalItems,
tags = Tags.find({}, {fields: {name: 1, submitted: 0}});
tags.forEach(function(tag){
    items.push(tag.name);
});
finalItems = _.uniq(items)
$('#search').typeahead({
    local: finalItems
});

Then, on a keyup event, do

   $('.tt-query').css('background-color','#fff');
   $('#search').removeClass('tt-query');

And in your css, add

.twitter-typeahead{
width:100%;
}

.twitter-typeahead.tt-query,
.twitter-typeahead.tt-hint {
  margin-bottom: 0;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px0;
  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: 05px10pxrgba(0,0,0,.2);
     -moz-box-shadow: 05px10pxrgba(0,0,0,.2);
          box-shadow: 05px10pxrgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

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

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 00, 0100%, 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-cursora {
  color: #fff;
}

.tt-suggestionp {
  margin: 0;
}

It's pretty hacky, but it will work until they get Typeahead and Bootstrap 3 to play nicely with each other.

Solution 2:

If you're after general free-text autocomplete, you may want to check out my autocomplete package for meteor, first released just a couple of days ago:

https://github.com/mizzao/meteor-autocomplete

You may also get some inspiration from there for what you are trying to do. I strongly recommend a Meteor collection-backed implementation rather than trying to cobble together something using existing asynchronous libraries, which is what I've done here. This allows the autocomplete to be completely reactive and client-side (the list contents can update while you're looking at them!) and much quicker.

Some pictures below...

1. Autocompleting users with @, where online users are shown in green:

   

2. In the same line, autocompleting something else with metadata and bootstrap icons:

   

Please fork, pull, and improve!