jQuery UI स्वत: पूर्ण विजेट खोज कॉन्फ़िगरेशन

Question

मैं पहले या अंतिम नाम से उपयोगकर्ता लुकअप को लागू करने के लिए jQuery UI autocomplete विजेट का उपयोग कर रहा हूं। ऐसा लगता है कि डिफॉल्ट स्वत: पूर्ण रूप से शब्द अनुक्रम द्वारा शब्दों को देखता है चाहे किसी शब्द में इसकी घटना न हो। तो यदि आपके पास डेटा है: javascript, asp, haskell और आप 'as' टाइप करते हैं तो आपको तीनों मिलेंगे। मैं इसे केवल शब्द की शुरुआत से मेल खाना चाहता हूं। तो उपर्युक्त उदाहरण में आपको केवल 'asp' मिलते हैं। ऐसा करने के लिए स्वत: पूर्ण विजेट को कॉन्फ़िगर करने का कोई तरीका है?

आखिरकार यह match by beginning of first or last name के लिए बेहतर होगा जैसे कि यह जीमेल में है।

नोट: मैं विशेष रूप से jQuery UI विजेट का उपयोग करके ऐसा करने का एक तरीका जानने का प्रयास कर रहा हूं। चूंकि मैं पहले से ही अपने प्रोजेक्ट में jQuery UI का उपयोग कर रहा हूं, इसलिए मैं इसके साथ चिपकने की योजना बना रहा हूं और अपने वेब एप्लिकेशन में अतिरिक्त पुस्तकालयों को जोड़ने की कोशिश नहीं कर रहा हूं।

Answer 1

jQuery यूआई v1.8rc3 में की शुरुआत से मेल लौटने के लिए, the autocomplete widget एक source विकल्प जो हो सकता है या तो एक को स्वीकार करता है स्ट्रिंग, एक सरणी, या एक कॉलबैक समारोह। यदि यह एक स्ट्रिंग है, तो विकल्प/सुझाव प्राप्त करने के लिए उस URL पर स्वतः पूर्ण हो जाता है। यदि कोई सरणी है, तो सरणी की शर्तों में किसी भी स्थिति में टाइप किए गए वर्णों की उपस्थिति के लिए, जैसा कि आपने बताया है, स्वत: पूर्ण खोज करता है। अंतिम संस्करण वह है जो आप चाहते हैं - कॉलबैक फ़ंक्शन।

स्वत: पूर्ण प्रलेखन से:

तीसरे भिन्नता, कॉलबैक, सबसे लचीलापन प्रदान करता है, और स्वत: पूर्ण करने के लिए किसी भी डेटा स्रोत से कनेक्ट करने के लिए इस्तेमाल किया जा सकता है। कॉलबैक दो तर्क प्राप्त करता है:

• request ऑब्जेक्ट, "टर्म" नामक एक ही संपत्ति के साथ, जो वर्तमान में टेक्स्ट इनपुट में मूल्य को संदर्भित करता है।उदाहरण के लिए, जब उपयोगकर्ता ने एक पूर्ण क्षेत्र में "नया यो" दर्ज किया जो स्वत: पूर्ण करने के लिए सेट है, तो request.term "नया यो" रखेगा।
• ए response फ़ंक्शन, एक कॉलबैक जो उपयोगकर्ता को सुझाव देने के लिए डेटा रखने के लिए एक ही तर्क की अपेक्षा करता है। यह डेटा प्रदत्त अवधि के आधार पर फ़िल्टर किया जाना चाहिए, और सरल स्थानीय डेटा के लिए अनुमत प्रारूप में एक सरणी होना चाहिए: लेबल/मूल्य/दोनों गुणों के साथ स्ट्रिंग-ऐरे या ऑब्जेक्ट-ऐरे।

उदाहरण कोड:

var wordlist= [ "about", "above", "across", "after", "against", 
       "along", "among", "around", "at", "before", 
       "behind", "below", "beneath", "beside", "between", 
       "beyond", "but", "by", "despite", "down", "during", 
       "except", "for", "from", "in", "inside", "into", 
       "like", "near", "of", "off", "on", "onto", "out", 
       "outside", "over", "past", "since", "through", 
       "throughout", "till", "to", "toward", "under", 
       "underneath", "until", "up", "upon", "with", 
       "within", "without"] ; 

$("#input1").autocomplete({ 
    // The source option can be an array of terms. In this case, if 
    // the typed characters appear in any position in a term, then the 
    // term is included in the autocomplete list. 
    // The source option can also be a function that performs the search, 
    // and calls a response function with the matched entries. 
    source: function(req, responseFn) { 
     var re = $.ui.autocomplete.escapeRegex(req.term); 
     var matcher = new RegExp("^" + re, "i"); 
     var a = $.grep(wordlist, function(item,index){ 
      return matcher.test(item); 
     }); 
     responseFn(a); 
    } 
}); 

कुछ प्रमुख बिंदु:

• $.ui.autocomplete.escapeRegex(req.term); करने के लिए कॉल पलायन खोज पद ताकि टेक्स्ट में कहीं भी regex-सार्थक शब्द टाइप किया है कि उपयोगकर्ता द्वारा सादे पाठ के रूप में माना जाता है। उदाहरण के लिए, डॉट (।) Regex के लिए सार्थक है। मैंने स्वत: पूर्ण स्रोत कोड पढ़कर इस से बचने के लिए रेगेक्स फ़ंक्शन को सीखा।
• new Regexp() के साथ लाइन। यह^(सर्कफ्लेक्स) के साथ शुरू होने वाली रेगेक्सपी निर्दिष्ट करता है, जिसका तात्पर्य है, यह तभी मेल खाएगा जब टाइप किए गए वर्ण सरणी में शब्द की शुरुआत में दिखाई देते हैं, जो आप चाहते थे। यह "i" विकल्प का भी उपयोग करता है जो एक केस-असंवेदनशील मिलान का तात्पर्य है।
• $.grep() उपयोगिता केवल प्रदान की गई सरणी में प्रत्येक शब्द पर प्रदान किए गए फ़ंक्शन को कॉल करती है। इस मामले में फ़ंक्शन बस यह देखने के लिए regexp का उपयोग करता है कि सरणी में शब्द टाइप किए गए के लिए एक मिलान है या नहीं।
• आखिरकार, प्रतिक्रिया के परिणामस्वरूप प्रतिक्रिया एफएन() का आह्वान किया जाता है।

काम कर डेमो:

बस एक ध्यान दें:: मैं इस बिंदु पर बहुत अपरिपक्व होने के लिए स्वत: पूर्ण पर दस्तावेज़ प्राप्त http://jsbin.com/ezifi

यह कैसा लग रहा है। मुझे ऐसा उदाहरण नहीं मिला जो इसने किया, और मुझे कामकाजी डॉक्टर नहीं मिला जिस पर। सीएसएस फाइलें आवश्यक थीं या कौन सी। सीएसएस कक्षाओं का उपयोग किया जाएगा। मैंने यह सब कोड का निरीक्षण करने से सीखा।

भी देखें, intrducing jsbin.com के लिए how can I custom-format the Autocomplete plug-in results?

Answer 2

मैं डेब्रिज से स्वत: पूर्ण का उपयोग करता हूं। http://www.devbridge.com/projects/autocomplete/jquery/

यह केवल शुरुआती पात्रों से मेल खाता है।

alt text http://i46.tinypic.com/2ihq7pd.jpg

जहां तक ​​नाम या उपनाम के नाम के आधार पर मिलान के रूप में, तो आप सिर्फ प्रथम और अंतिम नाम के साथ एक देखने सूची की आपूर्ति करना होगा।

उदाहरण उपयोग:

var wordlist = [ 
     'January', 'February', 'March', 'April', 'May', 'June', 
     'July', 'August', 'September', 'October', 'November', 
     'December' ]; 

     var acOptions = { 
      minChars:2, 
      delimiter: /(,|;)\s*/, // regex or character 
      maxHeight:400, 
      width:300, 
      zIndex: 9999, 
      deferRequestBy: 10, // miliseconds 

      // callback function: 
      onSelect: function(value, data){ 
       //$('#input1').autocomplete(acOptions); 
       if (typeof data == "undefined") { 
        alert('You selected: ' + value); 
       }else { 
        alert('You selected: ' + value + ', ' + data); 
       } 
      }, 

      // local autosuggest options: 
      lookup: wordlist 
     }; 

lookup विकल्प है कि आप स्वत: पूर्ण नियंत्रण प्रारंभ करने में एक सूची, या किसी वस्तु हो सकता है गुजरती हैं। उपर्युक्त ने एक साधारण सूची दिखायी। आप कुछ सुझाव है कि वापस आ पाने के लिए संलग्न डेटा चाहते हैं, तो lookup विकल्प एक वस्तु, इस तरह करते हैं:

var lookuplist = { 
    suggestions: [ "Jan", "Feb", "Mar", "Apr", "May" ], 
    data :   [ 31, 28, 31, 30, 31, ] 
}; 

Answer 3

वहाँ another jQuery autocomplete plug-in कि वैकल्पिक रूप से बस प्रत्येक आइटम के शुरू में खोज करता है (विकल्प, matchContains=false है मैं लगता है कि यह भी डिफ़ॉल्ट है)।

jQuery UI प्लगइन में ऐसे विकल्प की अनुपस्थिति को देखते हुए, मुझे लगता है कि आपको या तो एक अलग प्लगइन का उपयोग करना होगा, या उस समय को फिर से लिखना होगा जिसे आप अभी उपयोग कर रहे हैं।

Answer 4

आप स्वत: पूर्ण पॉप्युलेट करने के लिए डेटा कहां प्राप्त कर रहे हैं? क्या यह डेटाबेस से है? यदि हां, तो आप अपने प्रश्न में आप क्या चाहते हैं कर सकते हैं और परिणाम मिलने पर कि प्रत्येक शब्द (प्रथम/उपनाम)

Answer 5

THX cheeso,

मैं अपने कोड पहली और lastname मैचों में भी समर्थन करने के लिए बढ़ाया।

$("#input1").autocomplete({ 
     source: function(req, responseFn) { 
      addMessage("search on: '" + req.term + "'<br/>"); 

      var matches = new Array(); 
      var needle = req.term.toLowerCase(); 

      var len = wordlist.length; 
      for(i = 0; i < len; ++i) 
      { 
       var haystack = wordlist[i].toLowerCase(); 
       if(haystack.indexOf(needle) == 0 || 
       haystack.indexOf(" " + needle) != -1) 
       { 
        matches.push(wordlist[i]); 
       } 
      } 

      addMessage("Result: " + matches.length + " items<br/>"); 
      responseFn(matches); 
     } 
    }); 

डेमो: http://jsbin.com/ufimu3/

प्रकार 'एक' या 'फिर से'

Answer 6

आप स्ट्रिंग में प्रत्येक शब्द के प्रारंभ खोज करने के लिए चाहते हैं, अनुयायी के लिए एक और अधिक सुरुचिपूर्ण समाधान cheeso के लेने के लिए है लेकिन सिर्फ regexp शब्द सीमा विशेष वर्ण का उपयोग करें:

var matcher = new RegExp("\\b" + re, "i"); 

उदाहरण: http://jsbin.com/utojoh/2 (खोजने का प्रयास करें 'बीएल')