JQuery UI स्वत: पूर्ण -

Question

दर्ज करने से छिपाने के बाद सूची छुपाएं मेरे पास एक इनपुट है। मैं उपयोगकर्ता को सुझाव देने के लिए Jquery UI स्वत: पूर्ण का उपयोग करता हूं। मेरे पास मेरी सूची में 3 आइटम हैं: आइटम 1, item2, item3। जो मैं खोज रहा हूं वह है जब उपयोगकर्ता प्रवेश करता है तो बंद होने की सूची होती है। उदाहरण के लिए यदि उपयोगकर्ता केवल "इसे" में प्रवेश करता है, तो सभी 3 तत्व प्रदर्शित किए जाएंगे। उस स्थिति में यदि वह प्रवेश करता है तो मैं सूची बंद करना चाहता हूं। मैं इसके समाधान के साथ काम करने का प्रबंधन नहीं करता हूं। उम्मीद है कि कोई मदद कर सकता है। चीयर्स। मार्क।

http://jsfiddle.net/vXMDR/

मेरे एचटीएमएल:

<input id="search" type="input" />​ 

मेरे js:

$(function() { 

    var availableTags = [ 
      "item1","item2","item3" 
     ]; 

    $("#search").autocomplete({ 
     source:availableTags, 
     minLength: 0 
     }); 
});​ 

Answer 1

$(function() { 

    var availableTags = [ 
      "item1","item2","item3" 
     ]; 

    $("#search").autocomplete({ 
     source:availableTags, 
     minLength: 0 
    }).keyup(function (e) { 
     if(e.which === 13) { 
      $(".ui-menu-item").hide(); 
     }    
    }); 
});​ 

http://jsfiddle.net/vXMDR/2/

Answer 2

यहाँ समाधान है: http://jsfiddle.net/vXMDR/3/

यदि आपके कोई प्रश्न हैं तो मुझे बताएं।

जादू कुंजी प्रेस करने के लिए स्वत: पूर्ण करीब विधि

$("#search").keypress(function(e){ 
    if (!e) e = window.event; 
    if (e.keyCode == '13'){ 
     $('#search').autocomplete('close'); 
     return false; 
    } 
    }); 

अद्यतन

$("#search").keypress(function(e){ समारोह निर्दिष्ट करने के लिए #search तत्व की कुंजी दबाने बांधता है, event वस्तु में गुजर बाध्यकारी है। आप इसे $("#search").on('keypress', function(e) {...

if (!e) e = window.event; यह सुनिश्चित करता है कि यदि कोई वैध ईवेंट पास नहीं हुआ है, तो यह वर्तमान विंडो.एवेंट ऑब्जेक्ट पर e सेट करता है।

अंत में, if (e.keyCode == '13'){ परीक्षण करता है कि ईवेंट कीकोड मान 'एंटर' कुंजी के बराबर है। वैध कीकोड की सूची के लिए, see here। http://docs.jquery.com/UI/Autocomplete#method-close

Answer 3

मैं कॉलबैक के कारण shanabus समाधान आगे संशोधित किया है, समय देरी के लिए अनुमति देने के लिए -

यहाँ स्वत: पूर्ण करीब विधि के लिए दस्तावेज़ है।

http://jsfiddle.net/vXMDR/46/

यह क्या है या नहीं एक बूलियन के रूप में स्वत: पूर्ण प्रदर्शित करने के लिए स्टोर करने के लिए एक सरल हैक है। (मैं परिदृश्य में जहाँ पर प्रतीक्षा करनी पड़ती है बनाने के लिए setTimeOut का उपयोग कर रहा है, यह समस्या परिदृश्य नहीं समाधान है।)

shouldComplete = true; 

$("#search").autocomplete({ 
    source:function (request, response) {    
     setTimeout(
      function() { 
       response(shouldComplete ? availableTags : null); 
      }, 
      2000); 
    }   
    , 
    minLength: 0 
    }); 

फिर जब प्रवेश बटन दबाया जाता है झंडा गलत पर सेट है। कोई अन्य कुंजी ध्वज को पुनः सक्रिय करती है।

$("#search").keypress(function(e){ 
    if (!e) e = window.event; 
    if (e.keyCode == '13'){ 
     $('#search').autocomplete('close'); 
     shouldComplete = false; 
     return false; 
    } 
     else 
     { 
      shouldComplete = true; 
     } 
    }); 

यह और अधिक सुंदरता से करना संभव है, मुझे यकीन है, लेकिन इससे समस्या हल हो जाती है कि ड्रॉप डाउन बाद में दिखाई दे सकता है।

Answer 4

मैं इस मुद्दे में भाग गया और करीबी() विधि का उपयोग करने में सक्षम नहीं था क्योंकि बैकबोन व्यू के प्रत्येक लोड पर मेरा स्वत: पूर्णता पुनः प्रस्तुत किया जा रहा था।इस प्रकार, एक नया स्वत: पूर्ण तत्व डीओएम में जोड़ा गया था और जो संलग्न इनपुट तत्व उड़ाया गया था और फिर से बनाया गया था, भले ही चारों ओर अटक गए। ज़रूरत से ज़्यादा स्वत: पूर्ण तत्व कुछ समस्याएं पैदा कर रहे थे, लेकिन सबसे खराब उपयोगकर्ता दबाया जल्दी से पर्याप्त दर्ज जब, मैं इस अनुक्रम के माध्यम से जाना होता था:

1. उपयोगकर्ता प्रकार पाठ
2. सुझाव के लिए अनुरोध शुरू होता है निष्पादन
3. कीप्रेस इवेंट ट्रिगर और पूर्ण पाठ खोज निष्पादित करता है (उपयोगकर्ता ने स्वतः पूर्ण से कुछ नहीं चुना है)
4. दृश्य पुनः लोड, इनपुट फ़ील्ड और अन्य तत्व पुनः प्रस्तुत किए जाते हैं और डोम के अंत में एक नया स्वत: पूर्ण तत्व जोड़ा जाता है
5. ओरी सुझावों के लिए अनुवांशिक अनुरोध प्रतिक्रिया के साथ आता है और सुझाव प्रदर्शित होते हैं।

ध्यान दें कि चरण 5 में प्रदर्शित सुझाव अब एक स्वत: पूर्ण कंटेनर से बंधे हैं जो अब मेरे इनपुट फ़ील्ड से जुड़े नहीं हैं, इसलिए एसीसी दबाकर या स्क्रीन पर कहीं और क्लिक करने जैसी कोई भी घटना कुछ भी नहीं करेगी। सुझाव तब तक अटक जाते हैं जब तक पृष्ठ का पूरा रीलोड न हो जाए।

मैंने हाल ही में बनाए गए स्वत: पूर्ण तत्व के मुख्यकंटनर आईडी को संग्रहीत करके इसे मैन्युअल रूप से हटाकर इसे ठीक कर दिया।

// during rendering 
self.currentAutoComplete = $("#input-element").autocomplete({ 
    // set options 
}); 

// later 
if (this.currentAutoComplete) { 
    $("#" + this.currentAutoComplete.mainContainerId).remove(); 
}