टेक्स्ट के मध्य में स्वतः पूर्ण (जैसे Google Plus)

Question

स्वत: पूर्ण करने के लिए वहां कई विकल्प हैं। उनमें से ज्यादातर टाइप किए गए पहले कुछ अक्षरों पर काम करते प्रतीत होते हैं।

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

क्या किसी ने इस तरह की चीज करने के लिए कोड साझा किया है?

क्या किसी के पास खिलौना संस्करण (जैसे jQuery में) को लागू करने का प्रयास करने के लिए कोई संकेतक है?

Answer 1

यह jQueryUI's autocomplete widget के साथ संभव है। विशेष रूप से, आप अपनी आवश्यकता को पूरा करने के लिए this demo अनुकूलित कर सकते हैं। यहाँ एक उदाहरण है:

function split(val) { 
    return val.split(/@\s*/); 
} 

function extractLast(term) { 
    return split(term).pop(); 
} 

var availableTags = [ ... ]; // Your local data source. 

$("#tags") 
// don't navigate away from the field on tab when selecting an item 
.bind("keydown", function(event) { 
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) { 
     event.preventDefault(); 
    } 
}).autocomplete({ 
    minLength: 0, 
    source: function(request, response) { 
     var term = request.term, 
      results = []; 
     if (term.indexOf("@") >= 0) { 
      term = extractLast(request.term); 
      if (term.length > 0) { 
       results = $.ui.autocomplete.filter(
       availableTags, term); 
      } 
     } 
     response(results); 
    }, 
    focus: function() { 
     // prevent value inserted on focus 
     return false; 
    }, 
    select: function(event, ui) { 
     var terms = split(this.value); 
     // remove the current input 
     terms.pop(); 
     // add the selected item 
     terms.push(ui.item.value); 
     // add placeholder to get the comma-and-space at the end 
     terms.push(""); 
     this.value = terms.join(""); 
     return false; 
    } 
}); 

और यहाँ यह काम कर रहा है: http://jsfiddle.net/UdUrk/

आप (जैसे यह एक दूरस्थ डेटा स्रोत के साथ काम करने के लिए कैसे के रूप में) किसी भी अधिक जानकारी की जरूरत है, तो मुझे जानते हैं।

अपडेट: रिमोट डेटासोर्स (स्टैक ओवरफ्लो एपीआई) का उपयोग करके एक उदाहरण यहां दिया गया है: http://jsfiddle.net/LHNky/। इसमें स्वत: पूर्ण सुझावों का कस्टम डिस्प्ले भी शामिल है।

Answer 2

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

जैसे: $ (".selector") .autocomplete ({ खोज: समारोह (घटना, यूआई) {...} });

Answer 3

मैंने jQuery UI स्वत: पूर्ण कार्यक्षमता के आधार पर एक jQuery प्लगइन लिखा था। यहाँ मेरी समाधान है:

http://www.hawkee.com/snippet/9391/

आप इसे इस तरह कहते हैं:

$('#inputbox').triggeredAutocomplete({ 
    hidden: '#hidden_inputbox', 
    source: "/search.php", 
    trigger: "@" 
}); 

Answer 4

मैं इस के लिए एक बूटस्ट्रैप प्लगइन लिखा था। इससे कोई फर्क नहीं पड़ता कि फॉर्म फ़ील्ड में @ होता है। यह contenteditable divs बल्कि पाठ क्षेत्र से के लिए है: एंड्रयू Whittaker के जवाब थोड़ा लंबी-चौड़ी बातें बढ़ाना करने के लिए http://sandglaz.github.com/bootstrap-tagautocomplete/

Answer 5

, jQuery यूआई स्वत: पूर्ण के source विकल्प आइटम है कि एक बार ड्रॉप-डाउन सूची में प्रदर्शित करने के लिए कर रहे हैं युक्त एक सरणी निर्दिष्ट करने के लिए प्रयोग किया जाता है विजेट ट्रिगर किया गया है। इसे इस तरह के एक सरणी के रूप में परिभाषित किया जा सकता है, एक ऐसा फ़ंक्शन जो ऐसी सरणी देता है, या संसाधन के लिए एक यूआरएल जो इस तरह की एक सरणी उत्पन्न करता है।

तो source एक समारोह के रूप में परिभाषित किया गया है, समारोह के मापदंडों, request और response क्रमश: अपनी वापसी सरणी लिखें और विजेट के लिए यह आपूर्ति, मदद करने के लिए इस्तेमाल किया जा सकता। विशेष रूप से request आपके लिए ब्याज की बात है, क्योंकि इसके सदस्य, term में उस इनपुट तत्व का मान होता है जिस पर विजेट संलग्न होता है, जब फ़ंक्शन लागू होता है।

देखें कि मैं इसके साथ कहां जा रहा हूं?@ ब्याज और कर्सर के प्रतीक के बीच पाठ के लिए इसका सुंदर सरल, पार्स request.term, और विजेट को आपूर्ति करने के लिए सरणी बनाने के लिए उस पाठ का उपयोग करें। हालांकि, क्रॉस-ब्राउज़र संगत तरीके से कर्सर को विश्वसनीय रूप से ढूंढने में सक्षम होने के लिए आपको थोड़ा काम करना होगा (या कुछ तैयार किए गए कार्यों को नियोजित करना होगा)।

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