Typeahead 3 и Bootstrap - Autocomplete Name & ID

Question

Я всего лишь программист на базовом уровне - пишу в PHP и jQuery.

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

Я совмещаю это с taginput - я в основном хочу, чтобы это было похоже на Gmail - наберите чье-то имя и пусть они будут отображаться как теги. Мне нужно иметь доступ к данным (в частности, идентификатор), потому что после выбора имен я буду писать код для пользователей электронной почты на основе этих идентификаторов).

Я не могу понять, что именно мне нужно сделать, хотя - я спутать с различными плагинами машинописный - потому что мой сайт использует Bootstrap 3.

Как я понимаю - я должен использовать bootstrap3 -typeahead.min.js для использования. Это включено в мою страницу.

Из того, что я вижу, большая часть работы выполнена - у меня есть правильные результаты, возвращаемые из моего вызова ajax, но параметры не отображаются на экране, поскольку они мне нужны, и я получаю «TypeError: g is undefined "ошибка в Firebug.

Вот где я до сих пор (я могу отправить что-нибудь другое, что требуется):

$('#user_name').tagsinput({ 
    typeahead: { 
    source: function(query) { 
     var fetched = $.get('group.php?pa=ajax_get_users&term='+query); 
     console.log(fetched); 
    } 
    } 
}) 

страница ссылается выше возвращает JSON закодированные массив имен и идентификаторов, и, кажется, работает. Используя поджигатель, я могу видеть, что (например) - когда я типа «до» в поле, он делает вызов и следующий возвращается:

функция

[{"label":"Toby Behan","id":"2"},{"label":"Toby Behan","id":"3126"},{"label":"Tommy Streisand","id":"3144"}] 

console.log() показывает действительный объект вернулся в Firebug.

Что мне нужно для правильного отображения в раскрывающемся списке и выборе?

Спасибо за любую помощь.

Answer 1

I can't understand exactly what I need to do though - I've been confused with the different Typeahead plugins - because my site uses Bootstrap 3.

Я думаю, что вам придется выбирать между Bootstrap 3 машинописных и typeahead.js. Оба плагина должны работать, но вы должны использовать только один из них.

Ваши основные проблемы показывают, что ваш group.php возвращает массив объектов, в то время как для ввода тегов требуется массив значений. Вы можете использовать jQuery.map() для скрытых значений.

Так при использовании Bootstrap 3 машинописный:

$('input').tagsinput({ 
    typeahead: {     
    source: function(query) { 
     return $.map($.get('group.php?pa=ajax_get_users&term='+query)function(values){return values.label;}); 
    } 
    } 
}); 

Также см https://github.com/bassjobsen/Bootstrap-3-Typeahead#bootstrap-tags-input и https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/33#issuecomment-38047656

Для typeahead.js см https://gist.githubusercontent.com/jharding/9458749/raw/bloodhound.js о том, как использовать $.map