我没有任何建议。我在想什么
var states = new Bloodhound({
// datumTokenizer : function(d){return Bloodhound.tokenizers.whitespace(d.name) },
datumTokenizer : Bloodhound.tokenizers.whitespace("name"),
queryTokenizer : Bloodhound.tokenizers.whitespace,
// local : states
prefetch : "http://localhost:3000/all.json"
})
console.log(states)
states.initialize()
$("#prefetch .typehead").typeahead({
hint : true,
hightlight : true,
minLength : 1,
},{
name : "states",
source : states,
display : "name",
displayKey : "name"
})
像这样的JSON
[{"_id":"573ff845d35b36f82c6cc71e","created_at":"2016-05-21T05:55:17.335Z","inc":0,"updated_at":"2016-05-21T05:56:23.569Z","name":"comp1","pizza":"pizza1","ranking":20,"num":3,"__v":0},{"_id":"573ff845d35b36f82c6cc71f","created_at":"2016-05-21T05:55:17.340Z","inc":0,"updated_at":"2016-05-21T05:55:17.340Z","name":"comp2","pizza":"pizza2","ranking":5,"num":1,"__v":0},{"_id":"573ff845d35b36f82c6cc720","created_at":"2016-05-21T05:55:17.342Z","inc":0,"updated_at":"2016-05-21T05:55:17.342Z","name":"comp3","pizza":"pizza3","ranking":10,"num":1,"__v":0}]
最佳答案
设置具有templates属性的suggestion对象，该对象是返回包含要显示的建议的html字符串的函数。
用datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name")代替datumTokenizer: Bloodhound.tokenizers.whitespace("name");按照.ttAdapter()的states设置添加source。
不确定应该在建议容器中显示所选对象的哪个属性或其他html？在堆栈片段中使用选定对象的pizza属性
$(function() {
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: "https://gist.githubusercontent.com/guest271314/"
+ "5b1b22a728f97a8847034c3f9dba69b0/raw/"
+ "fc016e61fed65b45e027837dada9f60e6793bc4b/comp.json"
});
states.initialize();
$("#prefetch.typeahead").typeahead({
minLength: 1,
hint: true,
highlight: true
}, {
name: "suggestions",
display: "name",
templates: {
suggestion: function(data) {
console.log(data);
// set `html` to be displayed at suggestion dropdown
var suggest = "<li>" + data.pizza + "</li>";
return suggest
}
},
source: states.ttAdapter()
});
})div.search {
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead,
.tt-query,
.tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
</head>
<body>
<div class="search">
<input type="text" id="prefetch" class="typeahead" placeholder="search" />
</div>
</body>
</html>