jQuery स्वत: पूर्ण वास्तविक समय

Question

पर मान जोड़ना मैं एक स्वत: पूर्ण (उपयोगकर्ता प्रकार में कुछ प्रकार, एक प्रतिक्रिया का चयन करता है, जो DOM दृश्य में "टोकन" जोड़ता है) के साथ "टोकन इनपुट" शैली चेकबॉक्स बना रहा हूं।

jQuery स्वत: पूर्ण का उपयोग करना, क्या उन मानों को जोड़ने का कोई तरीका है जो उपयोगकर्ता के प्रकार के बाद source सूची में नहीं हैं?

उदाहरण के लिए, एक स्रोत ["Apples", "Oranges", "Bananas"] जैसा दिखता है। टेक्स्ट फ़ील्ड का उपयोग करते समय उपयोगकर्ता "plums," में टाइप करता है। यदि उपयोगकर्ता ऐसा चाहता है तो स्रोतों की सूची में "प्लम्स" जोड़ने का कोई तरीका है? मुझे पता है कि select और change ईवेंट हैं जिन्हें मैं देख सकता हूं, लेकिन select केवल तभी काम करता है जब चयन करने के लिए कुछ है (इस मामले में नहीं है), और change को किसी प्रकार की टाइमआउट जांच की आवश्यकता होगी ताकि उपयोगकर्ता यह टाइप कर सके कि उपयोगकर्ता ने टाइप करना बंद कर दिया है।

इसके विपरीत, क्या कोई और प्लगइन है जिसका उपयोग मैं इस व्यवहार को पूरा करने के लिए कर सकता हूं?

Answer 1

यह autocomplete के परिवर्तन ईवेंट के साथ ठीक काम करना चाहिए। यह कोड मानता है कि आईडी add वाला एक बटन है जो तब दिखाई देता है जब आप सूची में कोई नया आइटम जोड़ना चाहते हैं। यदि उपयोगकर्ता सूची से कोई आइटम चुनता है तो यह प्रकट नहीं होगा। वहाँ कुछ तोड़ मरोड़ कि बनाया जा सकता है कर रहे हैं, लेकिन अवधारणा के इस सबूत यह संभव बनाना चाहिए:

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      response($.ui.autocomplete.filter(source, request.term)); 
     }, 
     change: function (event, ui) { 
      $("#add").toggle(!ui.item); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

यहाँ एक उदाहरण है: http://jsfiddle.net/rmGqB/

---

अद्यतन: ऐसा लगता है कि मैं थोड़ा आवश्यकता को गलत समझा। तुम भी परिणाम में शामिल हो सकता है कि स्वत: पूर्ण के साथ उम्मीदवार सूची हो जाएगी और पर किया जाए या नहीं खोज के परिणामों को किसी भी सटीक मिलान झुकेंगे आधारित बटन की दृश्यता ड्राइव:

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      var result = $.ui.autocomplete.filter(source, request.term); 

      $("#add").toggle($.inArray(request.term, result) < 0); 

      response(result); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

उदाहरण:http://jsfiddle.net/VLLuJ/

Answer 2

एंड्रयू द्वारा प्रदान किया गया उत्तर ADD नया बटन बना रहता है, भले ही उपयोगकर्ता "नया" जोड़ने के बजाय सरणी से मौजूदा आइटम का चयन करता है !!!

'एड' बटन पर एक टॉगल शामिल करने के बजाय, एक पूर्ण इनचेंज फ़ंक्शन स्वतः पूर्ण के भीतर उपयोग किया जा सकता है जिसका उपयोग किया जा सकता है।

हालांकि "चेंज" प्रतीक्षा करता है जब तक कि टेक्स्ट बॉक्स फोकस न हो जाए, फिर भी एडीडी बटन दिखाने के लिए यह बेहतर इंटरफ़ेस हो सकता है यदि सरणी में कोई मिलान न हो। (या जोड़ने की "पुष्टि" बना सकता है)।

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

$(function() { 

    var source = ["Apples", "Oranges", "Bananas"]; 

    $("#auto").autocomplete({ 
    source: function (request, response) { 
     var result = $.ui.autocomplete.filter(source, request.term); 


     response(result); 
    }, 
    change: function(event, ui) { 
     var $label = $(this); 
     // figure out the id of hidden input box from label id 
     var $id = $('#'+this.id.replace('label_','id_')); 
     if (ui.item === null && $label.val() != ''){ 
     $("#add").show();    
     } 
     if(ui.item != null && $label.val() != ''){ 
     $("#add").hide();    
     } 
    } 
    }); 

    $("#add").on("click", function() { 
    source.push($("#auto").val()); 
    $(this).hide(); 
    }); 

}); 

कार्रवाई में मेरे संशोधित फिडल देखें - http://jsfiddle.net/VLLuJ/25/

Answer 3

पुराना सवाल है, लेकिन उपयोगी जवाब:

स्वत: पूर्ण स्रोत को अद्यतन करने के सेटर का उपयोग करें:

$ ("# ऑटो")।स्वत: पूर्ण ("विकल्प", "स्रोत", ["सेब", "संतरे", "केले", "प्लम्स"]);

देखें http://api.jqueryui.com/autocomplete/#option-source