twitter bootstrap autouzupełnianie rozwijane / combobox z Knockoutjs


114

Mam wymaganie, w którym MUSZĘ użyć menu autouzupełniania bootstrap, ALE użytkownik może mieć dowolny tekst w tym menu, jeśli chce. Zanim pomyślisz o TypeAhead, mógłbym użyć pola tekstowego Bootstrap TypeAhead, ale potrzebuję menu rozwijanego, ponieważ chcemy podać pewne wartości domyślne jako opcje headstartu na wypadek, gdyby użytkownicy nie wiedzieli, czego szukać.

Używam tego z MVC DropDownListFor, ponieważ tworzy dla nas kontrolkę wyboru.

Znalazłem ten artykuł, który robi to dla mnie.

https://github.com/danielfarrell/bootstrap-combobox/pull/20

Wszystko, co musiałem zrobić, to zdjąć nazwę z kontrolki zaznaczania, a kontrolka pozwalała mi wprowadzać dowolny tekst. Jak dotąd wszystko dobrze.

Teraz używam tego w połączeniu z Knockoutjs. Powiązałem moje opcje i wybraną wartość z kontrolką wyboru, a następnie w wierszu renderowanym w moim szablonie wywołałem (selector) .combobox (), co sprawia, że ​​kontrolka wyboru jest komoboksem bootstrap i dodaje kontrolkę wejściową i ukrywa kontrolkę wyboru w scenach za.

Problem polega teraz na tym, że gdy próbuję uzyskać wartości do wysłania na serwer, ponieważ wartość, którą umieściłem w polu wprowadzania, nie jest poprawną opcją z opcji, które podałem, aby wybrać kontrolkę, zawsze domyślnie ustawia ją na pierwszą opcję. Dzieje się tak, ponieważ ustawiłem powiązanie wybranej wartości na kontrolce wyboru, a nie w polu wejściowym, które zostało utworzone przez bootstrap-combobox.js.

Moje pytanie brzmi: jak sprawić, aby pole wejściowe było powiązane z danymi z tą samą porcją, do której została przypisana kontrolka wyboru.

Jakieś inne opcje? Daj mi znać, jeśli potrzebujesz więcej wyjaśnień lub masz pytania. Proszę zasugeruj.

Dzięki.


Znalazłem rozwiązanie dla mojej sytuacji. Użyłem pola tekstowego TypeAhead zamiast Comobox Autouzupełnianie i domyślnie pokazywałem menu opcji, gdy użytkownicy skupili się na kontrolce lub naciśnięciu przycisku. W ten sposób wiedzą, czego mogą szukać, co było moim głównym wymaganiem.
Krishna Teja Veeramachaneni

Odpowiedzi:


254

Spójrz na Select2 for Bootstrap . Powinien być w stanie zrobić wszystko, czego potrzebujesz.

Inną dobrą opcją jest Selectize.js . Wydaje się nieco bardziej natywny dla Bootstrap.


27
W jaki sposób użyłeś Select2, aby zezwolić na wprowadzanie tekstu, który nie został jeszcze uwzględniony w źródle danych?
compcentral

4
Jak słusznie wspomniał @compcentral, Select2 NIE ZEZWALA na wprowadzenie niczego, czego nie ma na liście opcji. Używanie funkcji (automatycznego) tagowania do symulacji tego jest uciążliwe, ponieważ nie akceptuje tekstu ze spacjami w środku.
Stas Slabko

2
Co za dobre znalezisko! Skończyło się na użyciu Selectize, ponieważ wydaje się, że bardziej przypomina Bootstrap.
Steven,

1
Ze względu na problem wskazany przez @compcentral i Stas zdecydowałem się na selectize.js.
Neil Monroe,

1
@compcentral, dlaczego nie używasz metody zdalnego źródła danych?
Clain Dsilva

23

Czy podstawowy datalist HTML5 działa? Jest czysty i nie musisz bawić się niechlujnym kodem strony trzeciej. Samouczek W3SCHOOL

MDN Dokumentacja jest bardzo wymowny i oferuje przykłady.


3
Główny problem z HTML 5 datalistpolega na tym, że nie obsługuje on żadnych zdarzeń DOM. Więc za każdym razem, gdy wybierasz wartość, musisz wyjść tabulatorem z odpowiedniego pola tekstowego
Pawan

@Pawan To nie jest prawda (już?). Wejście powiązane z datalist wywołuje zmiany i przynajmniej wprowadza zdarzenia. Spójrz tutaj , zarówno zmiany, jak i zdarzenia wejściowe uruchamiają dziennik konsoli.
Félix Gagnon-Grenier

1
Wszystkie te lata. Przez te wszystkie lata bawić się bibliotekami stron trzecich zamiast prostego i czystego, już obsługiwanego rozwiązania ...
Félix Gagnon-Grenier




Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.