提前键入寻血猎犬排序返回值

Question

我正在使用Twitter类型，但发现很难从mysql查询中划分结果。

我的 json 输出如下所示：{"id"："1"，"name"："Bravo"}

在当前状态下，TypeAhead 中的结果显示名称和 id ，我希望能够只显示名称，但输入的实际提交值是 id。我的脚本是流动的：

<script type="text/javascript">
// Instantiate the Bloodhound suggestion engine
var suggestions = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'includes/livesearch.php?key=%QUERY',       
wildcard: '%QUERY',
filter: function (name) {
// Map the remote source JSON array to a JavaScript object array
return $.map(name, function (name) {
return {
value: name
};
});
}
}
});
// Initialize the Bloodhound suggestion engine
suggestions.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead({
hint: true,
minLength: 2
}, {
limit: 7,
displayKey: 'value',
source: suggestions.ttAdapter(),
});
</script>

非常欢迎我如何实现这一目标的任何帮助或建议。

谢谢！

Answer 1

您可以创建一个对象来存储当前检索到的值。在filterBloodhound选项中，将对象属性设置为name.name，并将值设置为name.id。

要仅返回并显示检索到JSON的属性name请使用$.map()的index参数检查对象的属性名称。如果属性"name"则返回{value:name}，否则返回null。

使用typeahead:selected事件可以使用.typeaheadinput的当前值作为以前存储的初始返回值的对象在filter处的属性引用来设置<form>中<input type="hidden">元素的值。设置将值存储到空对象的变量引用。

<form>
<input class="typeahead" type="text" placeholder="search">
<input type="hidden" name="result" value="" />
<input type="submit">
</form>

$(function() {
// Instantiate the Bloodhound suggestion engine
var curr = {};
var suggestions = new Bloodhound({
datumTokenizer: function(datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'includes/livesearch.php?key=%QUERY',       
wildcard: '%QUERY',
filter: function (name) {
curr[name.name] = name.id;
// Map the remote source JSON array to a JavaScript object array
return $.map(name, function (name, index) {
return index === "name" ? {
value: name
} : null;
});
}
}
});
// Initialize the Bloodhound suggestion engine
suggestions.initialize();
// Instantiate the Typeahead UI
$(".typeahead").typeahead({
hint: true,
minLength: 2
}, {
limit: 7,
displayKey: 'value',
source: suggestions.ttAdapter(),
})
.on("typeahead:selected", function (e, datum) {
$("form [name=result]").val(curr[datum.value]); // set value here
curr = {};
});
})

波兰兹罗提 http://plnkr.co/edit/PJjzxemAQ9fO3P5YBfXi?p=preview