[英]Typeahead.js not showing suggestions
我正在尝试为输入框预先输入。 我为此使用了typeahead.js 。 我正在使用相同的代码来学习此功能。 虽然我没有收到任何错误,但它没有显示建议。 我还包括了所需的所有脚本,如下所示:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="the-basics.js"></script>
Html 如下:
<div class="container">
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</div>
js如下:
var substringMatcher = function(strs) {
console.log('strs', strs);
return function findMatches(q, cb) {
console.log('q', q);
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
console.log('matches', matches);
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
console.log('matches', matches);
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida'
];
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
});
请帮我解决这个问题。
PS:我已经尝试过类似这样的StackOverflow 上的不同解决方案,但它对我不起作用。
const states = [ "Alabama", "Alaska", "Arizona", "California", "Colorado", "Connecticut", "Delaware", "Florida" ]; $("#the-basics .typeahead").typeahead({ hint: true, highlight: true, minLength: 1, name: "states", source: states });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <div class="container"> <div id="the-basics"> <input class="typeahead" type="text" placeholder="States of USA" autocomplete="off"> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.