Bootstrap Dopuszczalne tylko wartości listy dozwolonych

Question

Czy możliwe jest ograniczenie wyboru użytkownika do predefiniowanych elementów źródła danych dla elementu Bootstrap Typeahead? Jeśli więc użytkownik wpisze coś, czego nie ma w źródle danych, zostanie wyświetlony komunikat informujący o tym jako taki?

Oto demo: http://cruiseoutlook.com/test

Answer 1

Jeśli dobrze rozumiem, gdy składnik wpisywanie znaków z wyprzedzeniem traci ostrość, użytkownik powinien być ostrzeżony, że jego wejście jest nieważny, jeśli nie ma na liście?

Kod będzie zatem coś takiego:

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!'); 
} 

Wystarczy być ostrożnym o tym, że indexOf nie jest realizowany w IE6-8. Ale podkładki można znaleźć, na przykład: Best way to find if an item is in a JavaScript array?.

Answer 2

Używając jquery i rozwiązania Samuela, myślę, że przezwyciężysz problem IE. Zmień funkcję validateSelecion na:

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

Zostaw resztę, jak zauważył Samuel.

Answer 3

Wpadłem na ten sam problem, ale w mojej sytuacji wszystkie moje moje dane były zdalne. Bloodhound nie ma naprawdę dobrych haczyków, o których jestem w tej chwili świadomy, pozwala ci to zrobić, ale możesz podłączyć się do ajaxowego callbacku i ręcznie zbudować poprawną cache wejściową, a następnie sprawdzić to przy zmianie/rozmyciu.

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(''); 
    } 
}); 

Answer 4

I rozwiązać ten problem nieco inaczej - większość czasu trzeba uchwycić id proponowanych opcji, aby umieścić na kolejne wezwanie serwisu WWW, itp

postanowiłem się puste ukryte pole, gdy rozpoczyna się wywołanie asynchroniczne typu cat, i ustaw wartość ukrytego pola na dane podstawowe w zdarzeniach autouzupełniania lub wybranych nagłówków nagłówka.

Po przesłaniu formularza po prostu sprawdzam, czy ukryte pole ma wartość, czy nie, a jeśli nie, to użytkownik nigdy nie wybrał sugerowanej opcji.

nazwałem pola ukrytego przez dodanie _id do niego na podstawie nazwy pola wpisywanie znaków z wyprzedzeniem, a następnie wykorzystywane ten kod w onAutocompleted i onSelected funkcje

I określonej te funkcje, dodając:

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

w kodzie dodającym funkcję .typeahead do pola wejściowego.

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

dokumentacji wpisywanie znaków z wyprzedzeniem rozmowy na temat istnienia trzy parametry, które są przekazywane do automatycznie uzupełnioną i wybranych funkcji, imprezy, punktu odniesienia, a nazwa, ale nigdy nie widziałem nazwę podjęcia, i dlatego użyłem mechanizm $ (this) .attr ('name'), aby uzyskać nazwę pola.