dropdownlist ke kotak kombo

Saya mencari kontrol sederhana atau plugin jQuery yang mengubah DropDownList menjadi ComboBox.

Saat ini saya menggunakan Ajax Combo Box yang sudah cukup saya gunakan. Saya mencoba membuat kotak kombo memiliki lebar 100% dan tata letaknya selalu kacau ketika item dipilih dari daftar di mana ukuran kotak kombo diubah menjadi lebar item daftar yang dipilih.

DropDownList asp.net standar hanya berfungsi dan tidak mengalami masalah apa pun, namun saya memerlukan fungsionalitas pelengkapan otomatis dari ComboBox.

Apakah ada plugin jQuery atau yang serupa yang bisa saya panggil di document.ready untuk mengonversi daftar dropdown asp.net standar ke kombo gaya kotak kombo ajax?

Kode Sejauh ini:

<script src="../../JavaScripts/jquery.min.js" type="text/javascript"></script>
<script src="../../JavaScripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#<%=ddlProjectCode.ClientID %>').combobox();
        alert('test');
    });

</script>

dll:

 <asp:DropDownList ID="ddlProjectCode" runat="server" AppendDataBoundItems="True" AutoCompleteMode="SuggestAppend"
                                AutoPostBack="True" DropDownStyle="DropDownList" RenderMode="Block" Width="100px"
                                OnSelectedIndexChanged="ddlProjectCode_SelectedIndexChanged" CssClass="comboBoxInsideModalPopup">
                            </asp:DropDownList>

Tapi sekarang saya mendapatkan kesalahan:

objek tidak mendukung properti metode 'kotak kombo' ini


drop-down-menu jquery asp.net combobox
person WraithNath    schedule 28.07.2011    source sumber

Jawaban (1)


arrow_upward
2
arrow_downward

Saya menggunakan jqueryui combobox untuk ini di beberapa proyek.

Saya cukup menyalin skrip dari contoh itu dan membuat beberapa perubahan spesifik proyek padanya.

Untuk lebar 100% Anda dapat mencoba sesuatu seperti ini: http://jsfiddle.net/KnBpt/

Bekerja jauh lebih baik daripada versi toolkit kontrol Ajax, ia bahkan dapat menemukan nilai ketika Anda mengetikkan bagian dari nama, asp:Combobox hanya menemukannya jika dimulai dengan nilai Anda.

Agar AutoPostback berfungsi saat mengetik nilai, Anda harus memicu .change() pada elemen pilih asli:

$('.ui-autocomplete-input').bind('autocompleteselect', function(){ 
    $(this).prev('select').change();
});

Ini memicu .change() untuk setiap pelengkapan otomatis dan kotak kombo jqueryui ketika nilainya berubah, dan itu akan secara otomatis memicu AutoPostback (jika disetel ke true), tanpa mengetahui ClientID atau apa pun.

person Willem    schedule 28.07.2011
comment
terima kasih, sekarang saya mencoba melihat apakah saya dapat langsung mengubah satu kontrol dengan kontrol lainnya karena inilah yang saya harapkan. $(dokumen).siap(fungsi () { $('#‹%=ddlProjectCode.ClientID %›').combobox(); alert('test'); }); - person WraithNath; 28.07.2011
comment
Saya baru saja mendapatkan kesalahan objek tidak mendukung properti metode 'kotak kombo' ini. Saya memiliki referensi ke skrip berikut, apa yang saya lewatkan? ‹skrip src=../../JavaScripts/jquery.min.js type=text/javascript›‹/script› ‹script src=../../JavaScripts/jquery-ui.min.js type=text/ javascript›‹/skrip› - person WraithNath; 28.07.2011
comment
pastikan Anda memuat semua skrip dan gaya yang diperlukan dan itu akan berfungsi. (ini juga berfungsi di situs web asp.net saya) Anda perlu menyertakan skrip khusus kombobox, lihat jsfiddle saya atau kode sumber demo jqueryui: $.widget( ui.combobox, {...}); - person Willem; 28.07.2011
comment
ah jadi saya juga harus menyertakan semua javascript khusus dan tidak hanya mereferensikan 2 perpustakaan jq dan memanggil .combobox()? ini adalah kesederhanaan melakukan sesuatu seperti $('#dropdownlist').combobox(); yang aku cari - person WraithNath; 28.07.2011
comment
Ini berfungsi seperti $('#dropdownlist').combobox(). Cukup muat skrip tambahan di file .js lain dan sertakan setelah semua skrip lainnya (karena skrip tersebut perlu dimuat). - person Willem; 28.07.2011
comment
Terima kasih, sepertinya itu berhasil! sekarang yang perlu saya lakukan adalah mencari cara untuk mengaktifkan indeks yang dipilih yang diubah dalam kode cs saya di belakang file ketika suatu item dipilih. Ada Ide? - person WraithNath; 28.07.2011
comment
Saya pikir AutoPostback=true untuk ddl Anda akan tetap berfungsi. Saat ini saya tidak memiliki studio visual untuk diuji, jadi cobalah - person Willem; 29.07.2011
comment
hampir ada postback yang berfungsi dengan perubahan yang dibuat di posting ini. stackoverflow.com/questions/6862207/ berfungsi saat memilih item daftar, hanya perlu mengaktifkannya saat pengguna mengetik item dan menekan enter. silakan komentar di postingan lain jika Anda punya saran :) - person WraithNath; 29.07.2011