来自Ajax的Twitter Typeahead / Bloodhound建议 - 来源:如何管理多个价值观?

时间:2016-04-13 11:27:36

标签: javascript typeahead.js typeahead bloodhound

我使用typeahead / bloodhound从ajax来源获取建议:

DELETE FROM Tasks
FROM Tasks LEFT OUTER JOIN
    TimeEntries ON TimeEntries.TaskID = Tasks.ID
WHERE TimeEntries.TaskID IS NULL;

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

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;
}
}
});

我能够检索我想要的所有信息(tagtitle和tagid)并使用以下方式显示它:

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

但我对此感到困惑:我如何只在建议字段中显示标签,但是还可以获得protags.tag.tagid以获得更多服务器端操作?

1 个答案:

答案 0 :(得分:1)

使用: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);
   }
);