Autocomplete function in text box provides instant response to user input text, which is very powerful and user-friendly.
For meteor, this function is called typeahead.
Run meteor search typeahead, you can find sergeyt:typeahead.
Clone it to your computer with git, in the "demo" subfolder, run meteor and open http://localhost:3000/.
When typing in the first text box ("NBA teams" in it), it will provide instant response.
sergeyt:typeahead's Bootstrap counterpart is called typeahead, too. That of jQuery is called "Autocomplete".
The following is a minimal working demo of sergeyt:typeahead:
$ meteor create meteorapp
$ cd meteorapp
$ meteor add sergeyt:typeahead
$ cat meteorapp.html
<head>
<title>meteorapp</title>
</head>
<body>
<h1>input "p" in the following text box</h1>
{{> sti}}
</body>
<template name="sti">
<input class="form-control typeahead" name="team"
type="text" placeholder="NBA teams"
autocomplete="off" spellcheck="off"
data-source="nba"/>
</template>
$ cat meteorapp.js
Nba = new Meteor.Collection("nba");
if (Meteor.isClient) {
Template.sti.helpers({
nba: function(){
return Nba.find().fetch().map(
function(it){
return it.name;
});
}
});
Meteor.startup(function(){
Meteor.typeahead.inject();
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
Nba.insert({name:'Philadelphia 76ers'});
Nba.insert({name:'Detroit Pistons'});
Nba.insert({name:'Portland Trail Blazers'});
});
}
Note:
-
Every time start the server, the 3 items will be added into collection Nba. So if you don't clear data (with
meteor reset), you will see many identical items in candidate list; -
No matter "on" or "off" of the value of the "autocomplete" attribute of the text box, the autocomplete function always works. So what is the function of this attribute?