来自Ajax的Twitter Typeahead / Bloodhound建议

来自Ajax的Twitter Typeahead / Bloodhound建议 - 来源：如何管理多个价值观？(Twitter Typeahead/Bloodhound Suggestions from Ajax-Source: how manage multiple values?)

我正在使用typeahead / bloodhound来获取来自ajax源的建议：

var protags = new Bloodhound({ datumTokenizer: function(protags) { return Bloodhound.tokenizers.whitespace(protags.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: '/ajax/getinfo.php?q=%QUERY', wildcard: '%QUERY', filter: function(response) { return response.protags; } } });

来自getinfo.php的JSON结果如下所示：

{ "protags": [ {"tag": { "tagid": "1", "tagtitle": "titleone"} }, {"tag": { "tagid": "2", "tagtitle": "titletwo"} }, {"tag": { "tagid": "3", "tagtitle": "titlethree"} }]}

我能够检索我想要的所有信息（tagtitle和tagid）并使用以下方法显示它：

$('.typeahead').typeahead( { hint: true, highlight: true, minLength: 1 }, { name: 'protags', displayKey: function(protags) { return protags.tag.tagtitle+'-'+protags.tag.tagid; }, source: protags.ttAdapter() });

但我对此感到困惑：我如何只在建议字段中显示标签，但是获取protags.tag.tagid以及更多服务器端操作？

I'm using typeahead/bloodhound for suggestions pulling from an ajax source:

var protags = new Bloodhound({ datumTokenizer: function(protags) { return Bloodhound.tokenizers.whitespace(protags.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: '/ajax/getinfo.php?q=%QUERY', wildcard: '%QUERY', filter: function(response) { return response.protags; } } });

JSON result from getinfo.php looks like this:

{ "protags": [ {"tag": { "tagid": "1", "tagtitle": "titleone"} }, {"tag": { "tagid": "2", "tagtitle": "titletwo"} }, {"tag": { "tagid": "3", "tagtitle": "titlethree"} }]}

I'm able to retrieve all the information i want (tagtitle AND tagid) and display it using:

$('.typeahead').typeahead( { hint: true, highlight: true, minLength: 1 }, { name: 'protags', displayKey: function(protags) { return protags.tag.tagtitle+'-'+protags.tag.tagid; }, source: protags.ttAdapter() });

But i'm confused about that: how can i display just the tagtitle in the suggestion field, but getting the protags.tag.tagid as well for more serverside actions?

最满意答案

使用：select事件（v 0.11.x）或：selected事件（v.0.10.x）。 阅读bloodhound / typeahead docs，因为它们在0.10.x和0.11.x之间做了很多更改

我使用0.10.5，在我的情况下，它看起来像这样：

编辑：看着你的json，我不确定什么数据进入模板和：选择的功能。 您可能需要使用data.protags.tag等

$(selector).typeahead( // options, key, source etc templates: { suggestion: function (data) { return '<div class="tt-name">' + data.tag.tagtitle + '</div>'; } } // end of options ) .on('typeahead:selected', function(event, data) { // you should be able to get your data here, if I'm correct like so: console.log(data.tag.tagid); } );

Use the :select event (v 0.11.x), or :selected event (v.0.10.x). Read the bloodhound/typeahead docs as they made a lot of changes between 0.10.x and 0.11.x

I'm using 0.10.5 and in my case it looks like this:

EDIT: looking at your json, I'm not sure what data goes into template and :selected function. You may need to use data.protags.tag etc

$(selector).typeahead( // options, key, source etc templates: { suggestion: function (data) { return '<div class="tt-name">' + data.tag.tagtitle + '</div>'; } } // end of options ) .on('typeahead:selected', function(event, data) { // you should be able to get your data here, if I'm correct like so: console.log(data.tag.tagid); } );