填寫多個輸入與引導預輸入

我是新絲毫的預輸入插頭。填寫多個輸入與引導預輸入

我想知道是否有可能來填補2輸入有了這個插件，詳細我有一個文本字段和隱藏的領域。

的數據結構是[{id: int, value: String, tokens: [...]}, ... ]

當用戶選擇一個建議，我想補隱藏字段與數據的id和可見字段值

你認爲哪是解決此問題的最佳解決方案？

來源

2013-05-28 user2428183

這確實是可能的。由於typeahead只處理簡單的字符串數組，因此很常見。使用updater功能全，這樣

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

來源

2013-05-28 13:01:45 davidkonrad

數據和令牌參考文檔 https://github.com/twitter/typeahead.js#datum反正 – user2428183

該功能從來沒有被稱爲！和我沒有使用本地數組，但我打電話給我的數組，所以它有點棘手使用您的解決方案... 我正在尋找一種方法來修改標準處理程序handleSelection來做這件事... – user2428183

當然，你還沒有提供任何數據，所以我不得不做一個測試JSON。預計您可以設法使用servlet的輸出而不是json []。如果更新者從未被調用，我想你永遠不會得到任何數據。給出一個真實的數據例子。沒有像「handleSelection」這樣的「標準處理程序」 - 更新是 - http://twitter.github.io/bootstrap/javascript.html#typeahead – davidkonrad

（幾乎）OK！我已修改處理程序這樣的..

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

其中i加入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="" >

也許有一個清晰的解決方案，歡迎任何的反饋....

來源

2013-05-28 20:33:17 user2428183

填寫多個輸入與引導預輸入

回答

相關問題