JQueryUI स्वत: पूर्ण आइटम

Question

पर कोई लिंक जोड़ें जब कोई उपयोगकर्ता खोज बॉक्स पर टाइप करना प्रारंभ करता है, तो सुझाव पृष्ठ उस डेटा से मेल खाने वाले सभी संग्रहों से नवीनतम आइटम देता है, साथ ही अन्य डेटा।

मैं उस आइटम को (अपनी छवि के साथ), और "इस संग्रह से सभी आइटम देखने" के लिए एक लिंक दिखाना चाहता हूं।

मैं (के सबसे) कर सकते हैं कि निम्न कोड के साथ:

$('#search').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: suggesturl, 
      dataType: 'json', 
      data: request, 
      success: function (data) { 
       response(data.map(function (value) { 
        return { 
         'label': '<img src="' + value.thumbsmall + '" />' + value.name + '<a href="/">More items from this collection...</a>', 
         'value': value.fullname 
        }; 
       })); 
      } 
     }); 
    }, 
    minLength: 3 
}) 

समस्या यह है कि, हालांकि लिंक बॉक्स, जब यह क्लिक करते ही में प्रकट होता है पर ध्यान नहीं दिया जाता है, और डिफ़ॉल्ट select कार्रवाई है निष्पादित (आइटम का value टेक्स्टबॉक्स में डाल दिया गया है)।

Answer 1

ऐसा लगता है कि आपके पास कुछ विकल्प हैं। सबसे पहले, आप स्वत: पूर्ण प्रारंभकर्ता पर एक चयन विकल्प का उपयोग करके अपनी खुद की चयन कार्रवाई निर्दिष्ट कर सकते हैं।

$(selector).autocomplete({ 
    source: ... , 
    select: function(value, data){ 
      if (typeof data == "undefined") { 
       emitMessage('You selected: ' + value + "<br/>"); 
      } else { 
       emitMessage('You selected: ' + data.item.value + "<br/>"); 
      } 
    } 
}); 

अगर वह पर्याप्त नहीं है, किसी कारण के लिए है, तो आप स्वतः पूर्ण सूची के लिए अपनी खुद की सामग्री प्रदान कर सकते हैं, और जैसा कि आप की जरूरत है कि रास्ते में के रूप में ज्यादा नियंत्रण मिलता है।
आप _renderItem fn बंदर-पैचिंग करके ऐसा करते हैं, जो सूची में प्रत्येक आइटम को प्रस्तुत करने के लिए स्वत: पूर्ण कॉल है। इसे कैसे करें इसके लिए this answer देखें। यह v1.8rc3 में काम करता है।

मुझे लगता है कि _renderItem में आप एक क्लिक करने योग्य <span> प्रस्तुत कर सकते हैं, और क्लिक ईवेंट पर आपको कोई भी तर्क संलग्न कर सकते हैं।

यदि आप उस मार्ग पर जाते हैं, तो आपको डिफ़ॉल्ट क्लिक कार्रवाई को बंद करने की आवश्यकता हो सकती है। मुझे लगता है कि ऑटोकॉम्प्लेट उस तत्व के लिए <a> का उपयोग करता है जो क्लिक ईवेंट प्रदान करता है। उस स्थिति में, आपको उस हैंडलर को क्लिक करने की आवश्यकता होगी।