twitter bootstrap autocomplete dropdown / combobox dengan Knockoutjs

114

Saya memiliki persyaratan di mana saya HARUS menggunakan dropdown autocomplete bootstrap, TAPI pengguna dapat memiliki teks bentuk bebas di dropdown itu jika mereka mau. Sebelum Anda berpikir tentang TypeAhead, saya bisa menggunakan kotak teks TypeAhead Bootstrap, tetapi saya perlu memiliki dropdown karena kami ingin memberikan beberapa nilai default sebagai opsi awal jika pengguna tidak tahu apa yang harus dicari.

Saya menggunakan ini dengan MVC DropDownListFor karena itu membuat kontrol pilih untuk kita.

Saya menemukan artikel ini yang melakukannya untuk saya.

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

Yang harus saya lakukan adalah menghapus nama dari kontrol pilih dan kontrol tersebut membiarkan saya memasukkan teks bentuk bebas. Sejauh ini semuanya baik-baik saja.

Sekarang, saya menggunakan ini bersama dengan Knockoutjs. Saya mengikat pilihan saya dan nilai yang dipilih ke kontrol pilih dan kemudian pada baris yang diberikan dari template saya, saya memanggil (selector) .combobox () yang membuat kontrol pilih sebagai bootstrap comobobox dan menambahkan kontrol input dan menyembunyikan kontrol pilih di layar dibelakang.

Masalahnya sekarang adalah ketika saya mencoba untuk mendapatkan nilai untuk dikirim ke server, karena nilai yang saya masukkan ke dalam kotak input bukan merupakan opsi yang valid dari opsi yang saya berikan untuk memilih kontrol, itu selalu mengaturnya ke opsi pertama secara default. Ini karena, saya mengatur pengikatan nilai yang dipilih pada kontrol pilih dan bukan pada kotak input yang dibuat oleh bootstrap-combobox.js.

Pertanyaan saya adalah bagaimana cara mendapatkan kotak input untuk mengikat data ke porperty yang sama dengan yang terikat pada kontrol pemilihan.

Ada pilihan lain ?? Beri tahu saya jika Anda memerlukan klarifikasi lebih lanjut atau ada pertanyaan. Mohon saran.

Terima kasih.

autocomplete combobox twitter-bootstrap knockout.js html.dropdownlistfor Krishna Teja Veeramachaneni
sumber
Saya menemukan solusi untuk situasi saya. Saya menggunakan kotak teks TypeAhead alih-alih Autocomplete comobox dan menunjukkan opsi dropdown secara default ketika pengguna fokus pada kontrol atau menekan tombol juga. Dengan begitu, mereka tahu apa yang bisa mereka cari yang merupakan kebutuhan utama saya.
Krishna Teja Veeramachaneni

Jawaban:

254

Lihat Select2 untuk Bootstrap . Itu harus bisa melakukan semua yang Anda butuhkan.

Pilihan bagus lainnya adalah Selectize.js . Rasanya sedikit lebih asli dari Bootstrap.

Arnold Daniels
sumber
27
Bagaimana Anda menggunakan Select2 untuk mengizinkan input teks yang belum disertakan dalam sumber data?
compcentral
4
Seperti @compcentral disebutkan dengan benar, Select2 TIDAK MENGIZINKAN Anda untuk memasukkan apa pun yang tidak ada dalam daftar opsi. Menggunakan fitur penandaan (otomatis) untuk mensimulasikan ini merepotkan, karena tidak menerima teks dengan spasi di dalamnya.
Stas Slabko
2
Temuan yang bagus! Saya akhirnya menggunakan Selectize karena tampaknya lebih mirip Bootstrap.
Steven
1
Karena masalah yang ditunjukkan oleh @compcentral dan Stas, saya memilih untuk menggunakan selectize.js.
Neil Monroe
1
@compcentral mengapa Anda tidak menggunakan metode sumber data jarak jauh?
Clain Dsilva
23

Apakah datalist HTML5 dasar berfungsi? Ini bersih dan Anda tidak perlu bermain-main dengan kode pihak ketiga yang berantakan. Tutorial W3SCHOOL

The MDN Dokumentasi sangat fasih dan fitur contoh.

Juto
sumber
3
Masalah utama dengan HTML 5 datalistadalah HTML 5 tidak mendukung peristiwa DOM apa pun. Jadi setiap kali Anda memilih nilai, Anda harus keluar dari kotak teks yang sesuai
Pawan
@Pawan Itu tidak benar (lagi?). Masukan yang terkait dengan perubahan kebakaran datalist dan peristiwa masukan, setidaknya. Lihat di sini , peristiwa perubahan dan masukan mengaktifkan log konsol.
Félix Gagnon-Grenier
1
Semua tahun-tahun ini. Bertahun-tahun bermain-main dengan perpustakaan pihak ketiga alih-alih solusi sederhana dan bersih yang sudah didukung ...
Félix Gagnon-Grenier
3

Select2 untuk plugin asli Bootstrap 3

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

plugin ini menggunakan plugin jquery select2

nuget

PM> Instal-Paket Select2-Bootstrap

Mahesh
sumber
1
Halo. Apakah ada perbedaan dengan jawaban positif pertama di sini? Sejauh yang saya bisa lihat, Anda menduplikasi saran pilih 2?
Félix Gagnon-Grenier
1

Combobox Fuel UX memiliki semua fitur yang Anda harapkan.

Stas Slabko
sumber
1
Sejauh yang saya bisa lihat, itu tidak memiliki kepala tipe.
jpkeisala