Twitter bootstrap 使用引导typeahead填充多个输入

Twitter bootstrap 使用引导typeahead填充多个输入,twitter-bootstrap,bootstrap-typeahead,Twitter Bootstrap,Bootstrap Typeahead,我是新来的,带着打字机的插头 我想知道是否有可能用这个插件填充2个输入, 详细地说,我有一个文本字段和一个隐藏字段 数据结构是[{id:int,value:String,tokens:[…]},…] 当用户选择建议时,我希望用基准的id填充隐藏字段,用值填充可见字段 您认为解决此问题的最佳解决方案是什么?这确实是可能的。非常常见,因为typeahead只处理简单的字符串数组。使用更新程序-函数,如下所示 html,提前键入和隐藏字段 <input type="text" id="typea

我是新来的,带着打字机的插头

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

数据结构是
[{id:int,value:String,tokens:[…]},…]

当用户选择建议时,我希望用基准的
id
填充隐藏字段,用值填充可见字段


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

这确实是可能的。非常常见,因为typeahead只处理简单的字符串数组。使用
更新程序
-函数,如下所示

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;
                 }
            }
        }
    });
});
//测试JSON(不知道“datum”是什么意思,什么是令牌)
var json=[
{'id':'1','value':'value1','tokens':''''},
{'id':'2','value':'value2','tokens':''''},
{'id':'3','value':'value3','tokens':''''}
];
//为typeahead创建一个值数组
var typeaheadArray=[];
对于(var i=0;i(几乎)正常!!
我已经像这样修改了处理程序

_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);
            }
        }
还有标记

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


也许有一个更干净的解决方案,欢迎任何反馈….

数据和令牌引用文档,但函数从未调用过!!而且我没有使用本地数组,但我调用了一个servlet来传递数组,因此使用您的解决方案有点棘手…我正在寻找一种方法来修改标准处理程序handleSelection以做这项工作…当然,你没有提供任何数据,所以我不得不做一个json测试。希望你能设法使用servlet的输出,而不是json[]。如果从未调用更新程序,我想你永远不会得到任何数据。给出一个真实的数据示例。没有“handleSelection”这样的“标准处理程序”-更新程序就是这样吗-
<input class="span3" type="text" placeholder="Customer" id="customer" name="" value="" >
<input type="hidden" id="customer-code" name="customer" value="" >