รายการแบบเลื่อนลงไปยังคอมโบบ็อกซ์

ฉันกำลังมองหาตัวควบคุมง่ายๆ หรือปลั๊กอิน jQuery ที่แปลง DropDownList เป็น ComboBox

ขณะนี้ฉันกำลังใช้ Ajax Combo Box ซึ่งฉันเกือบจะพอแล้ว ฉันกำลังพยายามสร้างความกว้างของคอมโบบ็อกซ์ 100% และเลย์เอาต์ของพวกมันจะเสียหายเสมอเมื่อมีการเลือกรายการจากรายการที่คอมโบบ็อกซ์ปรับขนาดเป็นความกว้างของรายการที่เลือก

asp.net DropDownList มาตรฐานใช้งานได้และไม่มีปัญหาใดๆ เหล่านี้ แต่ฉันต้องการฟังก์ชันเติมข้อความอัตโนมัติของ ComboBox

มีปลั๊กอิน jQuery หรืออะไรที่คล้ายกัน ฉันสามารถเรียกใช้ document.ready เพื่อแปลงรายการแบบเลื่อนลง asp.net มาตรฐานเป็นคำสั่งผสมสไตล์กล่องคำสั่งผสม ajax หรือไม่

โค้ดจนถึงตอนนี้:

<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>

ฯลฯ:

 <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>

แต่ตอนนี้ฉันได้รับข้อผิดพลาด:

วัตถุไม่สนับสนุนคุณสมบัติของวิธีการ 'combobox' นี้


drop-down-menu jquery asp.net combobox
person WraithNath    schedule 28.07.2011    source แหล่งที่มา

คำตอบ (1)


arrow_upward
2
arrow_downward

ฉันใช้ jqueryui combobox สำหรับสิ่งนี้ในหลายโครงการ

ฉันเพียงคัดลอกสคริปต์จากตัวอย่างนั้นและทำการเปลี่ยนแปลงเฉพาะบางโปรเจ็กต์กับสคริปต์นั้น

สำหรับความกว้าง 100% คุณสามารถลองใช้สิ่งนี้: http://jsfiddle.net/KnBpt/

ทำงานได้ดีกว่าเวอร์ชันชุดเครื่องมือควบคุม Ajax มาก มันสามารถค้นหาค่าได้เมื่อคุณพิมพ์ส่วนหนึ่งของชื่อ ส่วน asp:Combobox จะค้นหาค่านั้นก็ต่อเมื่อมันขึ้นต้นด้วยค่าของคุณเท่านั้น

เพื่อให้ AutoPostback ทำงานเมื่อพิมพ์ค่า คุณจะต้องทริกเกอร์ .change() บนองค์ประกอบการเลือกดั้งเดิม:

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

สิ่งนี้จะทริกเกอร์ .change() สำหรับทุก ๆ การเติมข้อความอัตโนมัติของ jqueryui และคอมโบบ็อกซ์เมื่อค่าของมันเปลี่ยนแปลง และจะทริกเกอร์ AutoPostback โดยอัตโนมัติ (หากตั้งค่าเป็นจริง) โดยไม่ทราบ ClientID หรืออะไรก็ตาม

person Willem    schedule 28.07.2011
comment
ขอบคุณ ตอนนี้ฉันกำลังลองดูว่าฉันสามารถเปลี่ยนการควบคุมหนึ่งกับอีกการควบคุมหนึ่งได้โดยตรงหรือไม่ เนื่องจากนี่คือสิ่งที่ฉันหวังไว้ $(document).ready(function () { $('#‹%=ddlProjectCode.ClientID %›').combobox(); alert('test'); }); - person WraithNath; 28.07.2011
comment
ฉันเพิ่งได้รับข้อผิดพลาดวัตถุไม่สนับสนุนคุณสมบัติของวิธี 'คอมโบบ็อกซ์' ฉันมีการอ้างอิงถึงสคริปต์ต่อไปนี้ ฉันพลาดอะไรไป ‹script src=../../JavaScripts/jquery.min.js type=text/javascript›‹/script› ‹script src=../../JavaScripts/jquery-ui.min.js type=text/ จาวาสคริปต์›‹/สคริปต์› - person WraithNath; 28.07.2011
comment
เพียงตรวจสอบให้แน่ใจว่าคุณโหลดสคริปต์และสไตล์ทั้งหมดที่จำเป็นและควรจะใช้งานได้ (ใช้งานได้ในเว็บไซต์ asp.net ของฉันด้วย) คุณต้องรวมสคริปต์ที่กำหนดเองของ Combobox ดู jsfiddle หรือซอร์สโค้ดของการสาธิต jqueryui: $.widget( ui.combobox, {...}); - person Willem; 28.07.2011
comment
อ่า ดังนั้นฉันต้องรวมจาวาสคริปต์ที่กำหนดเองทั้งหมดด้วย และไม่ใช่แค่อ้างอิงไลบรารี jq 2 รายการและเรียก .combobox()? มันเป็นความเรียบง่ายในการทำบางอย่างเช่น $('#dropdownlist').combobox(); ที่ฉันกำลังมองหา - person WraithNath; 28.07.2011
comment
มันทำงานเหมือน $('#dropdownlist').combobox() เพียงโหลดสคริปต์พิเศษในไฟล์ .js อื่น และรวมไว้หลังสคริปต์อื่นๆ ทั้งหมด (เพราะจำเป็นต้องโหลดสคริปต์เหล่านั้น) - person Willem; 28.07.2011
comment
ขอบคุณ ดูเหมือนว่าจะได้ผล! ตอนนี้สิ่งที่ฉันต้องทำคือหาวิธีเริ่มการเปลี่ยนแปลงดัชนีที่เลือกในโค้ด cs ของฉันที่อยู่ด้านหลังไฟล์เมื่อเลือกรายการ มีไอเดียอะไรบ้าง? - person WraithNath; 28.07.2011
comment
ฉันคิดว่า AutoPostback=true สำหรับ ddl ของคุณจะยังคงใช้งานได้ ฉันไม่มี Visual Studio ให้ทดสอบในขณะนี้ ดังนั้นลองดูสิ - person Willem; 29.07.2011
comment
เกือบจะมี postback ที่ทำงานร่วมกับการเปลี่ยนแปลงที่ทำในโพสต์นี้ stackoverflow.com/questions/6862207/ มันใช้งานได้เมื่อเลือกรายการ เพียงแค่ต้องทำให้มันเริ่มทำงานเมื่อผู้ใช้พิมพ์รายการและกด Enter โปรดแสดงความคิดเห็นในโพสต์อื่นหากคุณมีข้อเสนอแนะ :) - person WraithNath; 29.07.2011