Demo1: Local数据:
<span style="font-family:Courier New;">var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
jQuery.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};</span>
<span style="font-family:Courier New;">var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];</span>
<span style="font-family:Courier New;">$('#demoinput').typeahead({
hint:true,
highlight:true,
minLength:1
}, {
name:"states",
source: substringMatcher(states)
});</span>
Demo2:Custom Template
var schoolList = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local:[
{"id": "QH", "name": "清华大学"},
{"id": "BD", "name": "北京大学"},
{"id": "BY", "name": "北京邮电大学"},
{"id": "ZKD", "name": "中国科技大学"},
{"id": "GKD", "name": "中国科学院大学"}
]
});
$('#demoinput').typeahead({
hint:true,
highlight:true,
minLength:1
}, {
name:"schoolList",
display:"name",
source: schoolList,
templates: {
empty: ['<div class="empty-message">',
'unable to find any Best Picture winners that match the current query',
'</div>'
].join('\n'),
suggestion: function(data){
return "<div><strong>"+data.id+"</strong> – "+data.name+"</div>";
}
}
});
Demo3:ajax获取数据
http://xiajian.github.io/2014/12/01/typeahead/
http://stackoverflow.com/questions/21530063/how-do-we-set-remote-in-typeahead-js-0-10
http://stackoverflow.com/questions/25306141/typeahead-search-suggestions-undefined-remote-ajax