使用 bootstrap typeahead 填充多个输入答案

【问题标题】：Fill multiple input with bootstrap typeahead使用 bootstrap typeahead 填充多个输入
【发布时间】：2013-05-28 12:21:54
【问题描述】：

我是输入预输入插件的新手。

我想知道是否可以用这个插件填充 2 个输入，详细来说，我有一个文本字段和一个隐藏字段。

数据结构为[{id: int, value: String, tokens: [...]}, ... ]

当用户选择一个建议时，我想用数据的id 填充隐藏字段，用值填充可见字段

您认为解决此问题的最佳解决方案是什么？

【问题讨论】：

标签： twitter-bootstrap bootstrap-typeahead

【解决方案1】：

这确实是可能的。很常见，因为 typeahead 只处理简单的字符串数组。使用updater-function，像这样

html、预输入和隐藏字段

<input type="text" id="typeahead" name="typeahead" placeholder="type some text" data-provide="typeahead">
<input type="hidden" id="hidden" name="hidden">

脚本

//test JSON (doesnt know what you mean by "datum" and what token is)
var json = [
    { 'id' : '1', 'value' : 'value1', 'tokens' : '' },
    { 'id' : '2', 'value' : 'value2', 'tokens' : '' },
    { 'id' : '3', 'value' : 'value3', 'tokens' : '' }
];

//create an array of values for the typeahead
var typeaheadArray = [];
for (var i=0;i<json.length;i++) {
    typeaheadArray.push(json[i].value);
}

//the "magic" goes in the updater-function
// when you select an item from the list, updater looks up the 
// corresponding id and set the value of #hidden to that id 
$(document).ready(function() {
    $("#typeahead").typeahead({
        source: typeaheadArray,
        updater: function(item) {
            for (var i=0;i<json.length;i++) {
                if (json[i].value==item) {
                    $("#hidden").val(json[i].id);
                    return;
                 }
            }
        }
    });
});

【讨论】：

数据和标记参考github.com/twitter/typeahead.js#datum上的文档
函数永远不会被调用！！而且我没有使用本地数组，但我调用了一个将数组传递给我的servlet，因此使用您的解决方案有点棘手......我正在寻找一种方法来修改标准处理程序handleSelection 来完成这项工作......
当然，你没有提供任何数据，所以我只好做一个test-json。预计您可以设法使用 servlet 的输出而不是 json[]。如果更新程序从未被调用，我猜你永远不会得到任何数据。举一个真实的数据例子。没有像“handleSelection”这样的“标准处理程序” - 更新程序是 - twitter.github.io/bootstrap/javascript.html#typeahead

【解决方案2】：

（几乎）好的！我已经像这样修改了处理程序..

_handleSelection: function(e) {
            var byClick = e.type === "suggestionSelected", suggestion = byClick ? e.data : this.dropdownView.getSuggestionUnderCursor();
            if (suggestion) {
                this.inputView.setInputValue(suggestion.value);
                this.inputView.setHiddenValue(suggestion.datum.id); // <-- here is the mod
                byClick ? this.inputView.focus() : e.data.preventDefault();
                byClick && utils.isMsie() ? utils.defer(this.dropdownView.close) : this.dropdownView.close();
                this.eventBus.trigger("selected", suggestion.datum);
            }
        }

我在哪里添加 this.inputView.setHiddenValue(suggestion.datum.id);

我定义的方法如下

setHiddenValue: function(value) {
                id = this.$input.attr('id')+'-code';
                $('#'+id).val(value);
            }

还有标记...

<input class="span3" type="text" placeholder="Customer" id="customer" name="" value="" >
<input type="hidden" id="customer-code" name="customer" value="" >

也许有更清洁的解决方案，欢迎任何反馈....

【讨论】：