您的位置:首页 > Web前端 > JavaScript

typeahead.js几个demo

2015-11-30 08:39 597 查看

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: