我试图使用JQuery Typeahead plugin与 AJAX ,但我没有看到任何搜索结果。 AJAX 请求返回正常,但不显示任何内容。
下面的示例使用Open Brewery Search API查找啤酒厂,并且typeahead模板已设置为显示结果对象的name属性。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<form>
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input class="js-typeahead"
name="q"
type="search"
autocomplete="off"
placeholder="try: cooper">
</div>
<div class="typeahead__button">
<button type="submit">
<span class="typeahead__search-icon"></span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.js"></script>
<script>
$.typeahead({
input: ".js-typeahead",
order: "asc",
dynamic: true,
delay: 300,
template: "<p>{{name}}</p>",
source: {
breweries: {
ajax: function(query) {
return {
url: "https://api.openbrewerydb.org/breweries?by_name=" + query
}
}
}
}
});
</script>
</body>
</html>
字符串
1条答案
按热度按时间57hvy0tb1#
您需要使用
filter: false
。See github issue.字符串