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
相关文章推荐
- JSON详解
- 谈谈JSON数据格式
- 如何理解JavaScript中函数是第一类对象
- js版的oschian分页类
- 【南大软院大神养成计划:第十四天】JS,进阶的巨人(三)
- 详解JavaScript的表达式与运算符
- 详解JavaScript的流程控制语句
- javascript闭包(Closure)用法实例简析
- javascript针对cookie的基本操作实例详解
- javascript作用域链(Scope Chain)用法实例解析
- JavaScript基础篇(3)之Object、Function等引用类型
- javascript中eval和with用法实例总结
- 基于javascript如何传递特殊字符
- javascript for-in有序遍历json数据并探讨各个浏览器差异
- javascript编程异常处理实例小结
- JS简单模拟触发按钮点击功能的方法
- 基于javascript实现浏览器滚动条快到底部时自动加载数据
- 导航栏二级下拉菜单的js特效
- js寄生组合式继承
- Javascript 面向对象编程(一):封装