javascript - typeahead.js 自动完成中的源是什么，源应该包含什么？

Question

我是 typeahead.js 的新手，我正在这里进行自动完成。问题是这里的源应该是什么，它返回什么以及这里的handlebar的功能是什么。

html

<div id="custom-templates">
<input class="typeahead" type="text" placeholder="Oscar winners for Best Picture"/>
</div>

脚本

$('#custom-templates .typeahead').typeahead(null, {
name: 'best-pictures',
displayKey: 'value',
source: bestPictures.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'unable to find any Best Picture winners that match the current query',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<p><strong>{{value}}</strong> – {{year}}</p>')
}
});

我只是从twitter上拿这个例子来学习，但是来源是什么以及它是如何传递到handlebar的？如果源是 jsondata 如何呈现？

Answer 1

source 是一个在模式更改时调用的函数(即当用户编辑文本字段时)，并且应该返回一个匹配数组。

以下是匹配字符串数组中的子字符串的源示例:

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
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        matches.push({ value: str });
      }
    });

    cb(matches);
  };
};

要使用这个:

source: substringMatcher(['Alabama', 'Alaska', 'Arizona', 'Arkansas'])

相关:

• Examples
• Documentation