106

Mam wymaganie, w którym MUSZĘ użyć listy rozwijanej autouzupełniania bootstrap, ale użytkownik może mieć tekst w dowolnym formacie na liście rozwijanej, jeśli chce. Zanim pomyślisz o TypeAhead, mógłbym użyć pola tekstowego Bootstrap TypeAhead, ale muszę mieć listę rozwijaną, ponieważ chcemy podać pewne domyślne wartości jako opcje headstart, na wypadek gdyby użytkownicy nie wiedzieli, czego szukać.twitter bootstrap autouzupełnianie rozwijane/combobox z Knockoutjs

Używam tego z MVC DropDownListFor, ponieważ tworzy dla nas kontrolę 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ę od wyboru sterowania i kontroli pozwalał mi wejść wolnej postaci tekstu. Jak dotąd wszystko dobrze.

Teraz używam tego w połączeniu z Knockoutj. Wiążę moje opcje i wybraną wartość z formantem wyboru, a następnie w wierszu renderowanym z mojego szablonu, wywołałem (selector) .combobox(), który sprawia, że ​​kontrolka select to comobobox bootstrap i dodaje kontrolkę wejściową i ukrywa kontrolkę select w scenach za.

Problem polega teraz na tym, że próbuję uzyskać wartości do wysłania na serwer, ponieważ wartość wprowadzona w polu wprowadzania nie jest poprawną opcją z opcji, które dałem, aby wybrać kontrolę, zawsze ustawia ją na pierwszą. opcja domyślnie. Jest to spowodowane ustawieniem wiązania wybranej wartości na sterowaniu select, a nie na polu wprowadzania, które zostało utworzone przez bootstrap-combobox.js.

Moje pytanie brzmi: jak uzyskać pole wejściowe do powiązania danych z tą samą porperty, do której została przypisana kontrola wyboru.

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

Dzięki.

+0

I znalazłem rozwiązanie dla mojej sytuacji. Użyłem pola tekstowego TypeAhead zamiast Comoboxu Autouzupełniania i domyślnie pokazałem menu opcji, gdy użytkownicy skupili się również na przycisku sterowania lub naciśnięcia przycisku. W ten sposób wiedzą, czego mogą szukać, co było moim głównym wymaganiem. –

Odpowiedz

244

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

Inną dobrą opcją jest Selectize.js. Czuje się nieco bardziej ojczysty w Bootstrap.

+1

Świetnie! Dziękuję za informację ! Ten komponent jest mi potrzebny. – Shinichi

+27

W jaki sposób użyłeś Select2, aby zezwolić na wprowadzanie tekstu, który nie był jeszcze zawarty w źródle danych? – compcentral

+4

Jak poprawnie wspomniano @compcentral, Select2 NIE DOPUSZCZA, aby wprowadzić coś, czego nie ma na liście opcji. Używanie (auto) funkcji tagowania do symulacji jest uciążliwe, ponieważ nie akceptuje tekstu zawierającego spacje w środku. –

19

Czy działa podstawowy datalista HTML5? Jest czysty i nie musisz się bawić bałaganem od strony trzeciej ... W3SCHOOL tutorial

+3

Głównym problemem z datalistem HTML 5 jest to, że nie obsługuje on żadnych zdarzeń DOM. Więc za każdym razem, gdy wybierzesz wartość, musisz wyjść z odpowiedniego pola tekstowego. – Pawan

+3

Również nie jest ona obsługiwana w Safari? oznacza to, że wszystkie urządzenia i [urządzenia typu pad, telefon, komputer Mac] również są objęte zakazem. –