Question

我正在尝试使用“带标题的多个部分”来处理我的第一页，但我很难搞清楚这一点。

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

JSON文件存储在本地服务器上，包含来自twitter-typehead站点的默认数据。

更新了JS BIN文件：http://jsbin.com/babe/1/edit?html,js,output

Answer 1

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

http://jsbin.com/levo/1

请注意，此网站上还有很多其他的Typeahead.js示例，它们使用了jsfiddle.net，我个人更喜欢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 +
您忘了添加开场版和div标签

另外，我建议您使用“script”元素将依赖项包含在库中，而不是将整个库放入JS Bin“Javascript”部分;为使用引用库的代码保留“Javascript”部分。

超级基本的twitter-typeahead页面无效

1 个答案: