2015-05-04 5 views
1

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

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 + ", "); 
    }); 

}); 

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

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

Jsfiddle

+0

вы ищете taginput. Что-то вроде этого http://timschlechter.github.io/bootstrap-tagsinput/examples/ – Dhiraj

ответ

0

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

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

Update

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

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

Пример: Fiddle

+0

Нет, он все еще сбрасывает текстовое поле, и теперь он даже добавляет undefined для каждого слова. Чтение по вашей ссылке. – user17282

+0

Хорошо, у вас есть скрипка для этого? –

+0

Добавил JSfiddle к вопросу, но он не будет работать без сервера? Я использую флягу для обработки этих запросов. – user17282