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.

autocomplete combobox twitter-bootstrap knockout.js html.dropdownlistfor Krishna Teja Veeramachaneni
źródło
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.

Arnold Daniels
źródło
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.

Juto
źródło
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
3

Select2 dla natywnej wtyczki Bootstrap 3

https://fk.github.io/select2-bootstrap-css/index.html

ta wtyczka używa wtyczki select2 jquery

nuget

PM> Install-Package Select2-Bootstrap

Mahesh
źródło
1
Dzień dobry. Czy jest jakaś różnica w stosunku do pierwszej odpowiedzi, za którą głosowano tutaj? O ile widzę, zduplikowałeś sugestię Select 2?
Félix Gagnon-Grenier
1

Fuel UX combobox posiada wszystkie funkcje, których można oczekiwać.

Stas Slabko
źródło
1
O ile widzę, nie ma typowego przodu.
jpkeisala,