Заполните несколько входных данных с помощью загрузочного шрифта

Я новичок в плагине typeahead.

Я хотел бы знать, можно ли заполнить 2 ввода с помощью этого плагина, в частности, у меня есть одно текстовое поле и скрытое поле.

Структура данных [{id: int, value: String, tokens: [...]}, ... ]

Когда пользователь выбирает предложение, я хотел бы заполнить скрытое поле id данных, а видимое поле значением

Как вы думаете, какое решение является лучшим для решения этой проблемы?


twitter-bootstrap bootstrap-typeahead
person user2428183    schedule 28.05.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это действительно возможно. Очень распространен, поскольку 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;
                 }
            }
        }
    });
});
person davidkonrad    schedule 28.05.2013
comment
данные и токены относятся к документации на github.com/twitter/typeahead.js#datum в любом случае - person user2428183; 28.05.2013
comment
функция никогда не вызывается!! и я не использую локальный массив, но я вызываю сервлет, который передает мне массив, поэтому использовать ваше решение немного сложно... я искал способ изменить стандартный обработчик handleSelection для выполнения этой работы... - person user2428183; 28.05.2013
comment
Конечно, вы не предоставили никаких данных, поэтому мне пришлось сделать test-json. Ожидалось, что вам удастся использовать вывод сервлета вместо json[]. Если средство обновления никогда не вызывается, я думаю, вы никогда не получите никаких данных. Приведите реальный пример данных. Такого стандартного обработчика, как handleSelection, нет - это апдейтер - twitter.github.io/bootstrap /javascript.html#typeahead - person davidkonrad; 28.05.2013

arrow_upward
0
arrow_downward

(почти) Хорошо!! я изменил обработчик вот так..

_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="" >

возможно, есть более чистое решение, любые отзывы приветствуются....

person user2428183    schedule 28.05.2013