CODEWITHSUNDEEP
javascripttwitter-bootstrapmeteortwitter-bootstrap-3typeahead.js
Moritz Walter
Moritz Walter

Reputation: 717

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 be up to date in terms of typeahead.js, but probably has been outdated by the latest updates of meteor. For me, it doesn't work correctly.

Does somebody know how to run typeahead.js in Meteor or confirm I'm just using it wrong?

From my code I get this messed up typahead formatting:

messed up typeahead formatting

Thanks for any hint!

typeahead.html

<head>
  <title>typeahead</title>
</head>
<body>
  {{> hello}}
</body>
<template name="hello">
<form class="form-inline" role="form">
    <div class="form-group">
      <input class="form-control" type="text" id="typeahead">
    </div>
</form>
</template>

typeahead.js

if (Meteor.isClient) {
    Template.hello.rendered = function () {
    $('input#typeahead').typeahead({
        name: 'accounts',
        local: ['timtrueman', 'JakeHarding', 'vskarich']
        });
  };
}

Upvotes: 1

Views: 1151

Answers (2)

Andrew Mao
Andrew Mao

Reputation: 36930

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:

    enter image description here

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

    enter image description here

Please fork, pull, and improve!

Upvotes: 0

landland
landland

Reputation: 2147

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: 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-suggestion {
  display: block;
  padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
  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;
}

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

Upvotes: 1

Related Questions