1

私は先行入力プラグインを初めて使用しています。

このプラグインで 2 つの入力を入力できるかどうかを知りたいのですが、詳細には、1 つのテキスト フィールドと非表示フィールドがあります。

データ構造は[{id: int, value: String, tokens: [...]}, ... ]

idユーザーが提案を選択すると、非表示フィールドにデータを入力し、表示フィールドに値を入力したいと思います

この問題を解決するための最良の解決策はどれだと思いますか?

4

2 に答える 2

0

それは確かに可能です。typehead は文字列の単純な配列のみを扱うため、非常に一般的です。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-28T13:01:45.853 に答える
0

(ほぼ) 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);
            }
        }

どこに 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-28T20:33:17.973 に答える