在我的浏览器中使用以下代码加载HTML文件时,似乎无法显示下拉列表中的任何建议:
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.1/typeahead.bundle.min.js"></script>
<script type="text/javascript">
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' }
]
});
numbers.initialize();
$('.typeahead').typeahead(null, {
displayKey: 'num',
source: numbers.ttAdapter()
});
</script>
</head>
<body>
<input class="typeahead" type="text" placeholder="numbers (1-10)" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
</body>
</html>
小智 14
我认为它不起作用,因为你在脚本中包含脚本标记,<head>并且在看到.typeahead元素在主体中之前脚本正在执行.
一个简单的解决方法是使用jQuery的$(document).ready()回调来等到文档准备好之后再执行这个javascript:
$(document).ready(function() {
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' }
]
});
numbers.initialize();
$('.typeahead').typeahead(null, {
displayKey: 'num',
source: numbers.ttAdapter()
});
});
| 归档时间： |
|
| 查看次数： |
8452 次 |
| 最近记录： |