javascript - Twitter 预输入本地数据集不起作用

标签 javascript twitter-bootstrap

我正在尝试通过使用 http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-typeahead.php 上的帖子来实现 Twitter typeahead

我已经从 http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js 下载了 typeahead.js 0.11.1

我的 HTML 是

<body>
    <input id="test" type="text" class="typeahead tt-input" autocomplete="off" spellcheck="false">
</body>

我的 JavaScript 是

$(document).ready(function(){
    $('#test.typeahead').typeahead({
        name: 'e',
        local: ['one', 'two', 'three', 'four']
    });
});

但是,提前输入功能不起作用。打字时我在文本框中没有看到任何提示。而且浏览器控制台也没有登录。

有人可以帮忙吗? 提前致谢。

最佳答案

<强> DEMO

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
$('input').typeahead(null, {
displayKey: 'num',
source: numbers.ttAdapter()
});

关于javascript - Twitter 预输入本地数据集不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30161219/

相关文章:

javascript - runInNewContext 究竟做了什么?

javascript - 如何更改鼠标悬停时的图像?

javascript - Twitter bootstrap 下拉菜单创建一个滚动条

php - 从 Bootstrap Modal 运行查询

html - 使 Bootstrap 导航栏分隔线均匀分布

javascript - JQuery .on() 未将点击事件绑定(bind)到动态创建的元素

javascript - 如何在 Angular 2 中以编程方式构建 JSON

jquery - 如何在 Django 应用程序中使用 bootstrap-datepicker?

twitter-bootstrap - 如何使用 twitter bootstrap 向链接添加图标

html - 具有动态高度 CSS 的封面图像