twitter Bootstrap autocomplete rozwijane / combobox z Knockoutjs
Mam wymóg, w którym muszę korzystać z rozwijanego autouzupełniania bootstrap, ale użytkownik może mieć dowolny tekst formularza w tym rozwijanym menu, jeśli chce. Zanim pomyślisz o Typehead, mogę użyć Bootstrap Typehead textbox, ale muszę mieć rozwijaną, ponieważ chcemy dać pewne wartości domyślne jako opcje headstart w przypadku, gdy użytkownicy nie wiedzą, co szukać.
Używam tego z MVC DropDownListFor, ponieważ tworzy dla nas select control.
Znalazłem ten artykuł, który robi to dla mnie.
Https://github.com/danielfarrell/bootstrap-combobox/pull/20
Wystarczyło zdjąć nazwę z kontrolki select, a kontrolka pozwalała mi wprowadzić dowolny tekst. Jak na razie wszystko w porządku.
Teraz używam tego w połączeniu z Knockoutjs. I bind my options and selected value to the select control and then on rendered of my template, I called (selector).combobox (), który sprawia, że kontrolka select jest bootstrap comobobox i dodaje kontrolka wejścia 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ą umieszczam w polu wprowadzania, nie jest poprawną opcją z opcji, które dałem do wyboru sterowania, zawsze ustawia ją domyślnie na pierwszą opcję. To dlatego, że ustawiłem powiązanie wybranej wartości na kontrolce select, a nie na polu wprowadzania, które zostało utworzone przez bootstrap-combobox.js.
Moje pytanie brzmi jak uzyskać wejście box to data-bind do tego samego porperty, do którego została przypisana kontrolka select.
Jakieś inne opcje?? Daj mi znać, jeśli potrzebujesz więcej wyjaśnień lub masz pytania. Proszę sugerować.
Dzięki.6 answers
Zobacz Select2 dla Bootstrap. Powinien być w stanie zrobić wszystko, czego potrzebujesz.
Innym dobrym rozwiązaniem jest Selectize.js. Wydaje się nieco bardziej natywny dla Bootstrap.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-10 07:53:49
Czy podstawowy datalist HTML5 działa? Jest czysty i nie musisz się bawić brudnym kodem stron trzecich... W3School tutorial
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-01 15:40:33
Select2 for Bootstrap 3 native plugin
Https://fk.github.io/select2-bootstrap-css/index.html
This plugin uses select2 jQuery plugin
Nuget
PM > Install-Package Select2-Bootstrap
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-11 05:58:03
Fuel UX combobox posiada wszystkie funkcje, których można się spodziewać.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-14 13:09:23
Czy mogę zaproponować http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html, działa bardziej jak sugestia postów na Twitterze, gdzie daje listę użytkowników lub tematów na podstawie tagów @ lub #,
Zobacz demo tutaj: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/
W tym możesz łatwo zmienić @ i # na cokolwiek chcesz
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-11 19:43:46
Bootstrap Tokenfield też wydaje się dobry: http://sliptree.github.io/bootstrap-tokenfield/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-21 18:50:06