Как принять несколько входных данных в Typeahead?

Как я могу разрешить пользователю вводить несколько значений в текстовое поле с вводом текста, например, он набирает ph, и предложения всплывают, php, и он выбирает его, затем он набирает da, и появляются базы данных предложений, и он тоже выбирает это. Итак, в конце концов текст в моем поле ввода выглядит так

php, базы данных

Как мне добиться этого эффекта?

Я попробовал следующий код:

$(document).ready(function () {

    var getTags = new Bloodhound({
        datumTokenizer: function(d){ return Bloodhound.tokenizers.whitespace(d.result)},
        queryTokenizer: function(d){ return Bloodhound.tokenizers.whitespace(d)},
        remote: {
            url: 'query=plughere',
            wildcard: 'plughere'
        }
    });
    getTags.initialize();
    $('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'states',
        displayKey: 'name',
        source: getTags.ttAdapter(),        
    });

    $('.typeahead').bind('typeahead:selected typeahead:autocomplete', function(evt, item) {
        f = $('#hemo').val();
        $('#hemo').val(f + ", ");
    });

});

Я запрограммировал свой сервер так, чтобы он учитывал только последнее слово после запятой.

Здесь hemo — это идентификатор моего текстового поля. Как только я выбираю базы данных, он удаляет уже набранное перед ним слово. Поэтому, если я сначала выбираю php, а затем выбираю базы данных, он удаляет php из текстового поля и добавляет к нему базы данных.

Jsfiddle


javascript typeahead.js bloodhound
person user17282    schedule 04.05.2015    source источник
comment
вы ищете taginput. Что-то вроде этого timschlechter.github.io/bootstrap-tagsinput/examples   -  person Dhiraj    schedule 05.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

Если я прав, второй аргумент этого события привязки выводит значение на основе этой ссылки тогда вы должны использовать его так.

 $('.typeahead').bind('typeahead:selected typeahead:autocomplete', function(evt, item) {
    f = $('#hemo').val();
    $('#hemo').val(f + item.value + ", ");
 });

Обновить

Посмотрев на вашу скрипку, я подумал, что у вас будет еще одно текстовое поле, в которое будут помещены выбранные вами значения.

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

Пример: Fiddle

person Robin Carlo Catacutan    schedule 04.05.2015
comment
Нет, он по-прежнему сбрасывает текстовое поле и теперь даже добавляет неопределенность к каждому слову. Читаю по вашей ссылке. - person user17282; 04.05.2015
comment
Хорошо, у вас есть скрипка для этого? - person Robin Carlo Catacutan; 04.05.2015
comment
Добавил JSfiddle в вопрос, но он не будет работать без сервера, верно? Я использую флягу для обработки этих запросов. - person user17282; 04.05.2015
comment
Я делаю панель поиска, как в stackoverflow, братан. Поэтому я не могу иметь несколько текстовых полей. Я просмотрел документы typeahead и даже не смог найти ничего подходящего, поэтому в настоящее время я взламываю typeahead.bundle.js в строке 2167. - person user17282; 04.05.2015