typeahead.js几个demo

最新推荐文章于 2024-08-09 07:08:58 发布

原创最新推荐文章于 2024-08-09 07:08:58 发布 · 514 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用Typeahead.js实现本地数据搜索、自定义模板及通过ajax远程获取数据等功能。涵盖基本配置、数据源设定及结果展示等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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