2

I'm trying my first page working with "Multiple Sections with Headers", but I'm having difficulty figuring this out.

JS BIN here: http://jsbin.com/degu/5/edit?html,css,js,output

JSON files are stored on the local server, containing default data from twitter-typehead site.

Updated JS BIN file: http://jsbin.com/babe/1/edit?html,js,output

4

1 回答 1

1

使用 JS Bin，我重新创建了 typeahead.js 示例中的“Dead simple”示例：

http://jsbin.com/levo/1

请注意，此站点上还有很多其他使用 jsfiddle.net 的 Typeahead.js 示例，我个人更喜欢 JS Bin。

如您所知，来源是：

// instantiate the bloodhound suggestion engine
var numbers = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: [
    { num: 'one' },
    { num: 'two' },
    { num: 'three' },
    { num: 'four' },
    { num: 'five' },
    { num: 'six' },
    { num: 'seven' },
    { num: 'eight' },
    { num: 'nine' },
    { num: 'ten' }
  ]
});

// initialize the bloodhound suggestion engine
numbers.initialize();

// instantiate the typeahead UI
$('.typeahead').typeahead(null, {
  displayKey: 'num',
  source: numbers.ttAdapter()
});

要使“带标题的多个部分”示例正常工作，您需要在本地进行开发，否则您需要使用远程源来启用 JS Bin 访问您本地托管的 json 文件。

请注意，您的示例（即http://jsbin.com/babe/1/edit）不起作用的原因是：

  • 您缺少对 jQuery 1.9+ 的引用
  • 您忘记添加开头的 body 和 div 标签

此外，我建议您使用“脚本”元素包含对库的依赖项，而不是将整个库放入 JS Bin“Javascript”部分；为使用引用库的代码保留“Javascript”部分。

于 2014-02-07T23:36:22.077 回答