我正在尝试在我的 laravel 应用程序中使用 twitter typeahead.js。它不起作用(没有错误，但我的字段下什么也没有出现)。
因此，我决定使用一个简单的 html 文件，其中仅包含库和示例 ( https://twitter.github.io/typeahead.js/examples/ ) 来进行测试。 这也行不通。
我要疯了:/有什么明显的东西我没有看到吗？
这是我的代码:
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.min.css"
integrity="sha256-CU0/rbxVB3Eixd3bbIuJxHJLDnXriJS9cwp/BfcgpLw=" crossorigin="anonymous" />
</head>
<body>
<div id="bloodhound">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.min.js"
integrity="sha256-W+Cxk9exgjON2p73M4RcoKvCpQUZ+IjXhEzZk6rlg9M=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/bloodhound.min.js"
integrity="sha256-WJlyUMyJDhWTumC7/oaAtXFRBh0rZGc7qT80egxJafw=" crossorigin="anonymous"></script>
<script>
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
// constructs the suggestion engine
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
local: states
});
$('#bloodhound .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: states
});
</script>
</body>
</html>
最佳答案
我认为问题是由您在 fiddle 中使用的库版本引起的。
在 typeahead 示例中，他们似乎使用 jQuery 1.10.2，而您使用的是更高级的版本。
此外，您使用的 jquery.typeahead.min.js 插件似乎与中使用的 typeahead.jquery.js 插件不同typeahead 文档页面(注意插件名称顺序的变化)。
我建了这个jsfiddle我只更改了这些库，它就可以正常工作。
关于javascript - 如何使用预输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58771136/