Bootstrap Typeahead разрешает только значения списка

Ответ 1

Если я понимаю, когда компонент typeahead теряет фокус, пользователь должен быть предупрежден о том, что его вход недействителен, если его нет в списке?

Таким образом, код будет выглядеть примерно так:

var myData = [...]; // This array will contain all your possible data for the typeahead

$("#my-type-ahead").typeahead({source : myData})
                   .blur(validateSelection);

function validateSelection() {
    if(source.indexOf($(this).val()) === -1) 
        alert('Error : element not in list!');
}

Просто будьте осторожны в том, что indexOf не реализован в IE6-8. Но прокладки можно найти, например: Лучший способ найти элемент в массиве JavaScript?.

Ответ 2

Я столкнулся с той же проблемой, но в моей ситуации все мои данные были удалены. У Bloodhound на самом деле нет хороших крючков, о которых я в настоящее время знаю, это позволяет вам это сделать, но вы можете подключиться к завершающему обратному сообщению ajax и вручную создать допустимый кэш ввода, а затем проверить его на change/blur.

var myData = new Bloodhound({
    remote: {
        url: '/my/path/%QUERY.json',
        ajax: {
            complete: function(response){
                response.responseJSON.forEach(function (item) {
                    if (myData.valueCache.indexOf(item.value) === -1) {
                        myData.valueCache.push(item.value);
                    }
                });
            }
        }
    }
});
myData.valueCache = [];
myData.initialize();

$('#artists .typeahead').typeahead(null, {
    source: myData.ttAdapter()
}).bind('change blur', function () {
    if (myData.valueCache.indexOf($(this).val()) === -1) {
        $(this).val('');
    }
});

Ответ 3

Используя решение jquery и Samuel, я думаю, вы преодолеете проблему IE. Измените функцию validateSelecion на:

function validateSelection() {
    if ($.inArray($(this).val(), myData) === -1) 
        alert('Error : element not in list!');
}

Оставь остальные, как указал Самуил.

Ответ 4

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

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

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

Я назвал скрытое поле, добавив к нему _id на основе имени поля typeahead, а затем использовал этот код в onAutocompleted и onSelected функции

Я указал эти функции, добавив:

.on('typeahead:selected', onAutocompleted)
.on('typeahead:autocompleted', onSelected)

в коде, который добавляет функциональность .typeahead в поле ввода.

var n = $(this).attr('name')+'_id';
$('input[name="' + n + '"]').val(datum.id);

Документация typeahead говорит о наличии трех параметров, которые передаются автозаполненным и выбранным функциям, событию, дате и имени, но я никогда не видел передаваемого имени и почему я использовал $(this).attr('name'), чтобы получить имя поля.