การเติมข้อความอัตโนมัติ jQuery UI หยุดทำงานกะทันหัน

ฉันมีการเติมข้อความอัตโนมัติ jQuery UI แบบง่าย ๆ ซึ่งใช้งานได้ แต่ตอนนี้ไม่ได้เป็นเช่นนั้น รหัสมีดังนี้:

<html>
    <head>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

    <script type="text/javascript">
        $(function() {
            $( "#city" ).autocomplete({
                source: function( request, response ) {
                    var cities = new Array();
                    cities.push({"label" : "Chicago", "value" : 1});
                    cities.push({"label" : "Houston", "value" : 2});
                    response(cities);
                },
                focus: function(event, ui) {
                    //console.log(ui.item.label);
                    $(this).text(ui.item.label);
                    //console.log($(this).text());
                    event.preventDefault();
                    //console.log($(this).text());
                },
                select: function(event, ui) {
                    //console.log($(this).text());
                    event.preventDefault();
                    //console.log($(this).text());
                }
            });
        });
    </script>
    </head>
    <body>
      <input id="city" />
    </body>
</html>

ฉันใช้ตัวจัดการโฟกัสเพื่อแสดงป้ายกำกับในกล่องข้อความแทนค่า (ซึ่งเป็นสิ่งที่การเติมข้อความอัตโนมัติทำตามค่าเริ่มต้น) สิ่งที่เกิดขึ้นตอนนี้คือกล่องข้อความไม่แสดงทั้งป้ายกำกับหรือค่า แต่แสดงค่าที่ฉันพิมพ์ (พูดว่า 'จิ')

สิ่งนี้ใช้งานได้ แต่ตอนนี้ไม่ได้แล้ว ฉันคิดว่าเป็นเพราะฉันได้รวมจาวาสคริปต์อื่น ๆ ไว้และมีความขัดแย้งของชื่อฟังก์ชัน แต่ฉันย้ายมันไปที่ HTML แยกต่างหากดังที่คุณเห็นด้านบน แต่ก็ยังใช้งานไม่ได้

BTW หากฉันไม่แสดงข้อคิดเห็นคำสั่งบันทึกคอนโซลเหล่านั้นและจากดรอปดาวน์ฉันเลือกชิคาโก จากนั้นทั้งหมดก็จะพิมพ์ชิคาโก

นี่ดูเหมือนเป็นความผิดพลาดโง่ๆ ที่ไหนสักแห่งแต่ทำให้ฉันนิ่งงัน มีข้อเสนอแนะอะไรบ้าง?

แก้ไข 1: BTW ถ้าฉันลบโฟกัสและเลือกตัวจัดการ การเติมข้อความอัตโนมัติจะทำงานกับฟังก์ชันเริ่มต้น

แก้ไข 2: คงจะดีถ้ามีคนทดสอบสิ่งนี้บนคอมพิวเตอร์ของตนเอง


javascript jquery jquery-ui
person arahant    schedule 14.09.2012    source แหล่งที่มา
comment
นี่คือ jsFiddle ที่เหมาะกับฉัน (jQuery 1.8.0, jQuery UI 1.8.23): jsfiddle.net/NkBfm. สิ่งเดียวที่ต้องเปลี่ยนคือ .text ถึง .val แต่คุณบอกว่ามันใช้ได้ในบางกรณี มันอาจจะไม่ได้เป็นเช่นนั้น   -  person pimvdb    schedule 14.09.2012
comment
ฉันได้สร้าง fifdle ปัญหาโฮเวอร์ได้รับการแก้ไขแล้ว แต่ไม่พบสาเหตุที่ select ไม่ให้ผลลัพธ์เดียวกัน   -  person jaychapani    schedule 14.09.2012

คำตอบ (2)


arrow_upward
1
arrow_downward

มีการเปลี่ยนแปลงบางอย่างจากฟังก์ชันการทำงานเริ่มต้นซึ่งดูเหมือนว่าคุณกำลังพยายามดำเนินการอยู่ที่นี่

  1. คุณต้องการให้แสดงตัวอย่างตัวแปร "เสร็จสมบูรณ์" ในอินพุตหลักเมื่อถูกเลือก
  2. คุณต้องการให้ป้ายกำกับ ไม่ใช่ค่า แสดงเมื่อมีการเลือก

เหตุผลที่ทั้งสองวิธีนี้ใช้ได้ผลในปัจจุบันนั้นมีความเกี่ยวข้องและเรียบง่าย: ฟิลด์ <input> มีเพียงค่าที่เชื่อมโยงกันเท่านั้น ไม่ใช่ "ป้ายกำกับ" และ "ค่า" ที่แยกจากกัน เมื่อคุณเลือกตัวเลือก "เติมข้อความอัตโนมัติ" จากรายการ ตัวเลือกนั้นคือ "ค่า" ซึ่งจะถูกกรอกลงไป

สำหรับจุดที่ 1 ส่วนที่กำลังอัปเดตโดยเหตุการณ์ focus: เพียงแทนที่ .text(...) ด้วย .val(...) เนื่องจากนั่นคือแอตทริบิวต์ของฟิลด์ <input> ที่คุณต้องการอัปเดตจริง ๆ:

focus: function(event, ui) {
    $(this).val(ui.item.label);
    event.preventDefault();
},

สำหรับจุดที่ 2 ตามที่คุณต้องการให้กรอกฟิลด์ด้วยป้ายกำกับ ไม่ใช่ค่า คุณสามารถกรอกข้อความเดียวกันสำหรับทั้งคู่ได้ (ค่าเริ่มต้นหากกำหนดอาร์เรย์แบบแบน):

source: function( request, response ) {
    var cities = new Array();
    cities.push("Chicago");
    cities.push("Houston");
    response(cities);
},

โปรดจำไว้ว่าการเติมข้อความอัตโนมัตินั้น ไม่บังคับ เสมอ สิ่งที่คุณต้องกรอกใน value: คือสิ่งที่แบ็คเอนด์สามารถแยกแยะได้อย่างสมบูรณ์ นั่นอาจเป็น id แต่โดยปกติแล้วควรใช้สิ่งที่ผู้ใช้อาจพิมพ์ด้วยตนเอง แน่นอนว่า หากคุณทำเช่นนั้น ก็อาจสมเหตุสมผลที่จะใช้ ui.item.value แทน ui.item.label ในเหตุการณ์ focus: เช่นกัน

ด้วยแหล่งที่มาที่สมเหตุสมผลดังที่กล่าวมาข้างต้น คุณสามารถละทิ้งเหตุการณ์ select: ได้ทั้งหมด

person Will Palmer    schedule 14.09.2012
comment
ขออภัยสำหรับคำถามที่ทำให้เข้าใจผิด ฉันแปลง text() เป็น val() แล้วและมันก็ใช้งานได้ จากนั้นฉันก็ลืมตรวจสอบใน :( - person arahant; 14.09.2012

arrow_upward
0
arrow_downward

ฉันคิดว่าปัญหาอยู่ที่การกำหนดแหล่งที่มาของการเติมข้อความอัตโนมัติ สิ่งนี้ใช้ได้กับฉัน:

$(function() {

    var cities = [ 
        {"label": "Chicago", "value": 1}, 
        {"label": "Houston", "value": 2}
    ];                    


    $( "#city" ).autocomplete({
        source: cities, // assign the source directly
        focus: function(event, ui) {
            //console.log(ui.item.label);
            $(this).text(ui.item.label);
            //console.log($(this).text());
            event.preventDefault();
            //console.log($(this).text());
        },
        select: function(event, ui) {
            //console.log($(this).text());
            event.preventDefault();
            //console.log($(this).text());
        }
    });
});​

นี่คือซอ

person simonlchilds    schedule 14.09.2012
comment
ฉันไม่คิดว่านั่นคือปัญหา แต่ก็ขอบคุณที่สละเวลา - person arahant; 14.09.2012