[英]Can't get typeahead.js to work, no results will show
我一直在尝试让typeahead.js工作2天,但我拒绝相信这样做会很困难。 到目前为止,还没有一个例子能奏效,我一直在努力找出问题所在。
首先,我的typeahead.bundle.js文件是从此存储库下载的:
https://github.com/twitter/typeahead.js/tree/master/dist
我的代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Typeahead example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<input id="search"/>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Latest Typeahead.js -->
<script src="typeahead.bundle.js"></script>
<script type="text/javascript">
var colors = ["red", "blue", "green", "yellow", "brown", "black"];
$(document).ready(function() {
$('#search').typeahead({source: colors});
})
</script>
</body>
</html>
请帮我解决这个问题。
编辑 :从sakir的答案,我现在已经更改了我的Javascript代码以适合版本10语法,但是它仍然不会显示任何建议:
<script type="text/javascript">
var colors = ["red", "blue", "green", "yellow", "brown", "black"];
$(document).ready(function() {
$('#search').typeahead({
highlight: true,
hint: false
}, colors);
});
</script>
我想您的示例仅适用于typeahead 0.9.x版本。对于10版本,似乎有显着变化。您可以在此处查看更多信息。
我使用预输入版本0.9测试了您的示例,它运行正常,以下是运行示例。
http://jsfiddle.net/179yevon/
如果您想使用最新版本的typeahead,可以在此处查看示例
如您所见,从第一个示例开始,source参数接受类似于source: substringMatcher(states)
的函数source: substringMatcher(states)
。 也许您可以根据该更改代码
使用v.10 更新 ,u可以执行以下操作。
var colors = ["red", "blue", "green", "yellow", "brown", "black"];
var colorsource = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
local: colors
});
$('#search').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'color',
source: colorsource
});
这是提琴手
http://jsfiddle.net/qug5qdnp/
*流血行为是根据预先输入的数据源准备数据源。 如上所述,源将函数作为参数,函数期望字符串array。前面类型的source仅接受字符串数组,并且如果不打算使用流血风格,则需要将其转换为数组的数组
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.