如何解决Typeahead.js没有显示建议
我正在尝试为输入框输入内容。我为此使用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上的其他解决方案,例如this,但对我来说不起作用。
解决方法
{items.map((d) => (
<Accordion key={d.ID}
title={
<div>
<tr className="btn-heading">
<td>{d.ID}</td>
<td>{d.Mail}</td>
<td>{d.Name}</td>
<td>{d.PhoneNo}</td>
<td>{d.City}</td>
<td>{d.Date}</td>
<td>{d.Time}</td>
</tr>
</div>
}
content={
<div>
<p className="header">
<span className="header-content">Shipping Address:</span>
292 Naqshband Colony. Near rabbania Mosque. Multan
</p>
<Table size="sm">
<thead>
<tr>
<th>#</th>
<th>Article No</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
{products.map((c) =>
(
if(c.ID === 1) { <--- this if condition is not working
<tr key={c.ID}>
<td>{c.ArticleNo}</td>
<td>{c.ProductName}</td>
<td>{c.Quantity}</td>
<td>{c.Price}</td>
<td>{c.TotalAmount}</td>
</tr>
}
))};
</tbody>
</Table>
const states = [
"Alabama","Alaska","Arizona","California","Colorado","Connecticut","Delaware","Florida"
];
$("#the-basics .typeahead").typeahead({
hint: true,highlight: true,minLength: 1,name: "states",source: states
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。