JQuery UI स्वत: पूर्ण के लिए चयन के बाद स्पष्ट प्रपत्र फ़ील्ड

Question

मैं एक फ़ॉर्म विकसित कर रहा हूं, और jQuery UI स्वत: पूर्ण का उपयोग कर रहा हूं। जब उपयोगकर्ता एक विकल्प का चयन करता है, तो मैं चाहता हूं कि अभिभावक <p>टैग में जोड़े गए स्पान में पॉप का चयन हो । फिर मैं चाहता हूं कि चयन के साथ क्षेत्र को साफ किया जाए।

मेरे पास स्पान ठीक दिखाई दे रहा है, लेकिन मैं मैदान खाली नहीं कर सकता।

आप jQuery UI स्वत: पूर्णता की डिफ़ॉल्ट चयन कार्रवाई को कैसे रद्द करते हैं?

यहाँ मेरा कोड है:

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

बस $(this).val("");काम नहीं करता है। क्या पागलपन है कि अगर मैं स्वत: पूर्णता को अनदेखा करता हूं, तो लगभग सटीक कार्य ठीक रहता है, और उपयोगकर्ता द्वारा अल्पविराम टाइप करने पर बस कार्रवाई की जाती है:

$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

वास्तविक चयन परिणाम कई चयनों के साथ काम करने के लिए स्वतः पूर्ण होता है। यदि किसी के पास इसके लिए कोई सुझाव है, तो उनका स्वागत किया जाएगा।

Answer 1

फ़ील्ड साफ़ करने और ईवेंट रद्द करने के लिए $(this).val(''); return false; अपने selectफ़ंक्शन के अंत में जोड़ें :)

इससे मान को अपडेट होने से रोका जा सकेगा। आप देख सकते हैं कि यह यहां 109 लाइन के आसपास कैसे काम करता है ।

विशेष रूप से गलत के लिए चेक इन कोड:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}

Comments

बहुत खुबस! हालांकि मुझे मूर्खतापूर्ण लगता है। अब मैं जानता हूं, और जानना आधी लड़ाई है।

— जॉन एफ हैनकॉक

इसने इसे ठीक कर दिया। मैंने स्वीकार करने की कोशिश की, लेकिन उसने मुझे बताया कि मैं 7 और मिनटों के लिए नहीं कर सकता। स्वीकार किए जाते हैं। धन्यवाद।

— जॉन एफ हैनकॉक

मुझे सिर्फ इतना कहना है कि एक बार जब आप झूठे हो जाते हैं, तो आपको अब अपने आप को मान सेट करने की आवश्यकता नहीं है (यानी कोई ज़रूरत नहीं है $(this).val('');)

— उड़ी

यदि कोई चाहता है कि इनपुट फ़ील्ड किसी भी मूल्य पर बिल्कुल स्पष्ट हो, तो मेरा मानना ​​है कि कॉल को .val('')अभी भी होना चाहिए। return false;केवल इनपुट क्षेत्र में दिखाई देने से चयनित आइटम के पाठ नहीं कर पाएगा।

— रयान

उरी गलत है और रयान सही है। यदि आप इसे अपने चयन से अपडेट करने से रोकना चाहते हैं, तो आपको झूठे रिटर्न की आवश्यकता होगी, और यदि आप इसे खाली करना चाहते हैं, तो आपको $ (इस) .val ('') की आवश्यकता है।

— mynameistechno

Answer 2

गलत के बदले में आप event.preventDefault () का भी उपयोग कर सकते हैं।

select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}

Comments

मुझे संदेह है कि यह विधि स्वीकृत उत्तर की तुलना में अधिक कुशल है।

— Dlsso

Answer 3

फ़ील्ड को खाली करने के लिए, चुनिंदा कॉलबैक के भीतर गलत रिटर्न की आवश्यकता होती है। लेकिन यदि आप फिर से फ़ील्ड को नियंत्रित करना चाहते हैं, अर्थात मान सेट करते हैं, तो आपको उई को तोड़ने के लिए एक नया फ़ंक्शन कॉल करना होगा।

शायद आपके पास एक शीघ्र मान हो जैसे:

var promptText = "Enter a grocery item here."

इसे तत्व की घाटी के रूप में सेट करें। (फोकस पर हम '' के लिए सेट)।

$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
    source: availableTags,
    select: function(){
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    }
});

foo.resetter = function() {
  $("selector").val(promptText);  //returns to original val
}

Comments

नमस्ते, मेरा एक अलग सवाल था, प्रॉम्प्ट को बचाने के बारे में, मैं तकनीकी कारणों से प्लेसहोल्डर्स का उपयोग नहीं कर सकता। यह सही था, धन्यवाद!

— हगोलोव

Answer 4

ये मेरे लिए अच्छी तरह से काम करता है।

ईवेंट का चयन करने के बाद, मैंने ईवेंट परिवर्तन का उपयोग किया।

 change:function(event){
   $("#selector").val("");  
   return false;
 }

मैं एक नौसिखिया हूं!

Answer 5

इसे इस्तेमाल करे

select: function (event, ui) {
    $(this).val('');
    return false;       
}

Answer 6

मैंने केवल इसे ध्यान केंद्रित करने के लिए मजबूर किया है:

$('#select_id').blur();
printResult();