twitter bootstrap otomatik tamamlama açılır menüsü / Knockoutjs ile birleşik giriş kutusu


114

Önyükleme otomatik tamamlama açılır menüsünü kullanmak zorunda olduğum bir gereksinimim var, ANCAK kullanıcı isterse bu açılır menüde serbest biçimli metin alabilir. TypeAhead hakkında düşünmeden önce, Bootstrap TypeAhead textbox'ı kullanabilirdim, ancak kullanıcıların ne arayacaklarını bilmemeleri durumunda headstart seçenekleri olarak bazı varsayılan değerler vermek istediğimiz için açılır listeye ihtiyacım var.

Bunu MVC DropDownListFor ile kullanıyorum çünkü bu bizim için bir seçme denetimi oluşturuyor.

Bunu benim için yapan bu makaleyi buldum.

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

Tek yapmam gereken, seçme denetiminden adı çıkarmaktı ve denetim serbest biçimli metin girmeme izin vermekti. Şimdiye kadar hepsi iyi.

Şimdi, bunu Knockoutjs ile birlikte kullanıyorum. Seçeneklerimi ve seçilen değeri seçme denetimine bağlarım ve ardından şablonumun satırında oluşturulan (seçici) .combobox () adını aradım, bu da seçme denetimini bir önyükleme comobox yapar ve bir giriş denetimi ekler ve sahnelerde seçme denetimini gizler arkasında.

Şimdi sorun, sunucuya gönderilecek değerleri almaya çalıştığımda, girdi kutusuna koyduğum değer, kontrolü seçmek için verdiğim seçeneklerden geçerli bir seçenek olmadığından, her zaman varsayılan olarak ilk seçeneğe ayarlıyor. Bunun nedeni, seçili değerin bağlanmasını bootstrap-combobox.js ile oluşturulan giriş kutusunda değil, seçme kontrolünde ayarlıyorum.

Sorum şu: Giriş kutusunu, seçme denetiminin bağlı olduğu aynı porperty'ye veri bağlamak için nasıl alabilirim.

Başka seçenekler var mı?? Daha fazla açıklamaya ihtiyacınız olursa veya sorularınız varsa bana bildirin. Lütfen önerin.

Teşekkürler.


Durumuma bir çözüm buldum. Autocomplete comobox yerine TypeAhead metin kutusunu kullandım ve kullanıcılar kontrole odaklandıklarında veya aşağı düğmesine bastığında varsayılan olarak seçenekler açılır menüsünü gösterdim. Bu şekilde, neyi arayabileceklerini bilirler ki bu benim birincil ihtiyacımdı.
Krishna Teja Veeramachaneni

Yanıtlar:


254

Bootstrap için Select2'ye bir göz atın . İhtiyacınız olan her şeyi yapabilmelidir.

Diğer bir iyi seçenek de Selectize.js'dir . Bootstrap'e biraz daha yerel geliyor.


27
Veri kaynağına henüz dahil edilmemiş metin girişine izin vermek için Select2'yi nasıl kullandınız?
compcentral

4
@Compcentral'da doğru bir şekilde bahsedildiği gibi, Select2 seçenek listesinde olmayan herhangi bir şeyi girmenize İZİN VERMEZ. Bunu simüle etmek için (otomatik) etiketleme özelliğini kullanmak, içinde boşluklar olan metinleri kabul etmediğinden, külfetli bir iştir.
Stas Slabko

2
Ne güzel bir keşif! Daha Bootstrap-esque göründüğü için Selectize'ı kullanmayı bıraktım.
Steven

1
@Compcentral ve Stas'ın işaret ettiği sorun nedeniyle selectize.js ile gitmeyi seçtim.
Neil Monroe

1
@compcentral neden uzak veri kaynağı yöntemini kullanmıyorsunuz?
Clain Dsilva

23

Temel HTML5 veri uzmanı çalışıyor mu? Temiz ve dağınık üçüncü taraf koduyla uğraşmanıza gerek yok. W3SCHOOL öğreticisi

MDN Belgeler derece iyidir ve örnekler bulunmaktadır.


3
HTML 5 ile ilgili en büyük sorun, datalistherhangi bir DOM olayını desteklememesidir. Bu nedenle, bir değer seçtiğiniz her
seferinde

@Pawan Bu doğru değil (artık?). Datalist ateşlemelerine bağlı girdi, en azından değişir ve olayları girer. Buraya bakın , hem değişiklik hem de giriş olayları bir konsol günlüğünü tetikler.
Félix Gagnon-Grenier

1
Bunca yıl. Tüm bu yıllar, zaten desteklenen basit ve temiz bir çözüm yerine üçüncü taraf kitaplıklarla uğraşıyor ...
Félix Gagnon-Grenier




Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.