स्वतः पूर्णता मूल्य पाठ बॉक्स पर लेबल नहीं

Question

Im ठीक से काम करने के लिए स्वत: पूर्ण होने की कोशिश कर परेशानियाँ हो रही हैं।

यह सब मुझे ठीक लगता है लेकिन ...।

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

हालाँकि जब मैं ड्रॉपडाउन से एक आइटम का चयन करता हूं तो मान लेबल के बजाय टेक्स्टबॉक्स पर लागू होता है।

मैंने क्या गल्त किया है?

अगर मैं फ़ायरबग का उपयोग करने वाले स्रोत को देखता हूं तो मैं देख सकता हूं कि मेरे छिपे हुए फ़ील्ड को सही तरीके से अपडेट किया जा रहा है।

Comments

फायरबग में JSON प्रतिक्रिया में आप क्या देखते हैं?

— SLAKs

[{"लेबल": "टॉम स्मिथ", "मूल्य": "1234"}, {"लेबल": "टॉमी स्मिथ", "मूल्य": "12321"}]

— गोताखोर दान

देखें कि: stackoverflow.com/questions/6716266/…

Answer 1

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/

Comments

बहुत उपयोगी! क्या आपका मतलब यह नहीं था$("#selected-customer").val(ui.item.value);

— juanignaciosl

@juanignaciosl: नहीं - यह कोड labelइसके बजाय खोज बॉक्स को अपडेट करने के लिए है value।

— एंड्रयू व्हाइटेकर

मैं db नहीं लेबल पर मूल्य संग्रहीत कर रहा हूं, इसलिए अगली बार मैं मूल्य के आधार पर lable के अनुसार सेट करना चाहता हूं। ऐसा करने का तरीका क्या है?

— parth.hirpara

अरे, कुछ ऐसा ही करने की कोशिश कर रहा है लेकिन 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) } })

— बैटमैन

यहाँ भी, मैं लेबल प्रदर्शित करना चाहता हूँ, मूल्य POSTed। मैंने एक छिपे हुए तत्व को शामिल करने के लिए एक कीचड़ को एक साथ पैच करने का प्रबंधन किया था (@ यंग झांग के जवाब के समान, लेकिन इस बिंदु पर ऐसा लग रहा है कि मेरा अपना स्वत: पूर्ण रोल करना कम से कम अप्राकृतिक दृष्टिकोण होगा।

— लोरी

Answer 2

बस अंदर "आईडी" द्वारा इनपुट तत्व को संदर्भित करने के बजाय इसे जोड़ना चाहते हैं चुनिंदाकॉलबैक फ़ंक्शंस पर ध्यान केंद्रित करें औरआप इस चयनकर्ता काउपयोग कर सकते हैं, जैसे:

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

यह उपयोगी है जब आप कई तत्वों के लिए स्वत: पूर्ण असाइन करते हैं, अर्थात कक्षा द्वारा:

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

Answer 3

मेरे मामले में, मुझे छिपे हुए इनपुट में एक और फ़ील्ड 'आईडी' रिकॉर्ड करने की आवश्यकता है। इसलिए मैं अजाक्स कॉल से लौटाए गए डेटा में एक और फ़ील्ड जोड़ता हूं।

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

और सूची में सबसे नीचे एक 'create new' लिंक जोड़ा है। 'क्रिएट न्यू' पर क्लिक करने पर एक मोडल पॉप अप होगा और आप वहां से नया आइटम बना सकते हैं।

$('#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');
            }
        }
    );

मुझे लगता है कि बिंदु यह है कि आप केवल 'लेबल' और 'मूल्य' के अलावा किसी भी अतिरिक्त डेटा फ़ील्ड को जोड़ सकते हैं।

मैं बूटस्ट्रैप मोडल का उपयोग करता हूं और यह नीचे दिया जा सकता है:

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