typeahead.js几个demo

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值