การเติมข้อความอัตโนมัติโดยใช้ค่าไม่ติดป้ายกำกับกับกล่องข้อความ


86

ฉันมีปัญหาในการพยายามทำให้การเติมข้อความอัตโนมัติทำงานอย่างถูกต้อง

ทุกอย่างดูโอเคสำหรับฉัน แต่ ....

<script>
$(function () {
    $("#customer-search").autocomplete({
        source: 'Customer/GetCustomerByName',
        minLength: 3,
        select: function (event, ui) {
            $("#customer-search").val(ui.item.label);
            $("#selected-customer").val(ui.item.label);
        }
    });
});
</script>
<div>
<input id="customer-search" />
 </div>
@Html.Hidden("selected-customer")

อย่างไรก็ตามเมื่อฉันเลือกรายการจากดรอปดาวน์ค่าจะถูกนำไปใช้กับกล่องข้อความแทนป้ายกำกับ

ฉันทำอะไรผิด?

หากฉันดูต้นทางโดยใช้ firebug ฉันจะเห็นว่าฟิลด์ที่ซ่อนอยู่ของฉันได้รับการอัปเดตอย่างถูกต้อง


1
คุณเห็นอะไรในการตอบสนอง JSON ใน Firebug
SLaks

[{"label": "Tom Smith", "value": "1234"}, {"label": "Tommy Smith", "value": "12321"}]
Diver Dan

คำตอบ:


216

พฤติกรรมเริ่มต้นของselectเหตุการณ์คือการปรับปรุงด้วยinput ui.item.valueรหัสนี้ทำงานหลังจากตัวจัดการเหตุการณ์ของคุณ

เพียงส่งคืนfalseหรือโทรevent.preventDefault()เพื่อป้องกันไม่ให้เกิดเหตุการณ์นี้ขึ้น ฉันขอแนะนำให้ทำสิ่งที่คล้ายกันสำหรับfocusเหตุการณ์เพื่อป้องกันไม่ให้ui.item.valueถูกวางไว้ในinputขณะที่ผู้ใช้เลื่อนตัวเลือก:

$("#customer-search").autocomplete({
    /* snip */
    select: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
        $("#selected-customer").val(ui.item.label);
    },
    focus: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
    }
});

ตัวอย่าง: http://jsfiddle.net/andrewwhitaker/LCv8L/


1
มีประโยชน์มาก! คุณไม่ได้หมายถึง$("#selected-customer").val(ui.item.value);
juanignaciosl

1
@juanignaciosl: ไม่ - รหัสนั้นมีไว้เพื่ออัปเดตช่องค้นหาโดยใช้labelแทนvalue.
Andrew Whitaker

ฉันกำลังจัดเก็บค่าไว้ที่ db not label ดังนั้นในครั้งต่อไปฉันต้องการตั้งค่าตาม lable ตามมูลค่า วิธีการทำคืออะไร?
parth.hirpara

1
Hey, พยายามที่จะทำบางสิ่งบางอย่างที่คล้ายกัน แต่ใส่ทุกอย่างในแทนfocus selectปัญหาคือมีการตั้งแทนitem.value item.labelอย่างไรก็ตามเพื่อหลีกเลี่ยงสิ่งนี้? lookup.autocomplete({ source: data, focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label) status.text(ui.item.value) submitted.text(ui.item.submitted) comments.html(ui.item.comments) } })
Batman

เหมือนกันที่นี่ฉันต้องการแสดงป้ายกำกับค่า POSTed ฉันจัดการปะติดปะต่อกันที่เกี่ยวข้องกับองค์ประกอบที่ซ่อนอยู่ (คล้ายกับคำตอบของ @Yang Zhang ด้านล่าง แต่ ณ จุดนี้ดูเหมือนว่าการเติมข้อความอัตโนมัติของตัวเองจะเป็นวิธีที่ไม่ดีอย่างน้อยที่สุด
Lori

15

เพียงต้องการเพิ่มสิ่งนั้นแทนที่จะอ้างอิงองค์ประกอบอินพุตโดย "id" ภายในฟังก์ชันการเลือกและโฟกัสการโทรกลับคุณสามารถใช้ตัวเลือกนี้เช่น

$(this).val(ui.item.label);

จะมีประโยชน์เมื่อคุณกำหนดการเติมข้อความอัตโนมัติสำหรับหลายองค์ประกอบเช่นตามชั้นเรียน:

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

8

ในกรณีของฉันฉันต้องบันทึก 'id' ฟิลด์อื่นในอินพุตที่ซ่อนอยู่ ดังนั้นฉันจึงเพิ่มฟิลด์อื่นในข้อมูลที่ส่งคืนจากการโทรของ ajax

{label:"Name", value:"Value", id:"1"}

และได้เพิ่มลิงก์ "สร้างใหม่" ที่ด้านล่างของรายการ เมื่อคลิกปุ่ม "สร้างใหม่" โมดอลจะปรากฏขึ้นและคุณสามารถสร้างรายการใหม่ได้จากที่นั่น

$('#vendorName').autocomplete
    (
        {
            source: "/Vendors/Search",
            minLength: 2,
            response: function (event, ui)
            {
                ui.content.push
                ({
                    label: 'Add a new Name',
                    value: 'Add a new Name'
                });
            },
            select: function (event, ui)
            {
                $('#vendorId').val(ui.item.id);
            },
            open: function (event, ui)
            {
                var createNewVendor = function () {
                    alert("Create new");
                }
                $(".ui-autocomplete").find("a").last().attr('data-toggle', 'modal').addClass('highLight');
                $(".ui-autocomplete").find("a").last().attr('href', '#modal-form').addClass('highLight');
            }
        }
    );

ฉันคิดว่าประเด็นคือคุณสามารถเพิ่มช่องข้อมูลพิเศษอื่น ๆ นอกเหนือจาก 'label' และ 'value' ได้

ฉันใช้โมดอล bootstrap และสามารถเป็นได้ดังนี้:

<div id="modal-form" class="modal fade" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">

            </div>
        </div>
    </div>
</div>

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.