jQuery Tokeninput जोड़ने

Question

मैं एक स्क्रिप्ट है कि उपयोगकर्ता इनपुट पर बनाता है लिखने की प्रक्रिया में हूँ मौजूद नहीं हैं,

मैं कुछ क्षेत्रों है कि अपने मूल्यों को डेटाबेस से करनी किए जाने की जरूरत है,

और अगर कोई प्रविष्टि मिली है कि मैं एक नया मूल्य जोड़ना चाहता हूं ताकि अगला उपयोगकर्ता इसे स्वतः पूर्ण कर सके।

मैं इस महान देख & लागू करना आसान jQuery प्लगइन TokenInput बुलाया मिला, लेकिन यह प्रतीत नहीं होता

के लिए प्रविष्टियां कि मेरे डेटाबेस क्वेरी में उपलब्ध नहीं हैं स्वीकार करते हैं। http://loopj.com/jquery-tokeninput/demo.html

है वहाँ इस के लिए एक वैकल्पिक हल:

यहाँ प्लगइन के लिए लिंक है? या आप एक और प्लगइन सुझाते हैं जिसमें पहले से ही यह सुविधा है।

और मैं एक छोटा सा वेबसाइटों की इस तरह की सुरक्षा के पहलू को लेकर चिंतित हूं वहाँ कुछ खास मैं जब कार्यान्वयन की इस तरह कर रही है की देखभाल करने की आवश्यकता है?

Answer 1

जब आप एक मैदान पर tokenInput सक्षम

$(selector).tokenInput(url, ... 

कि वह URL यहां tokenInput खोज क्वेरी भेजता है। यह एक स्क्रिप्ट को इंगित करता है जो खोज क्वेरी से मेल खाने वाली डेटाबेस प्रविष्टियों के आधार पर सुझाव देता है। आप जो चाहते हैं वह उस स्क्रिप्ट को सूची में एक और सुझाव जोड़ना है जब आपके डेटाबेस में कुछ भी खोज क्वेरी से मेल नहीं खाता है। यह कैसे करें स्क्रिप्ट पर बहुत निर्भर करता है।

क्योंकि आपने php के साथ अपना प्रश्न टैग किया है, तो मैं यूआरएल पॉइंट्स को एक php स्क्रिप्ट पर अनुमान लगा रहा हूं जो सुझावों से भरा JSON ऑब्जेक्ट देता है। उस मामले में, php स्क्रिप्ट को संशोधित इतना है कि यह सूची में एक नई सुझाव जोड़ता है:

"{id: " . $idForThisNewSuggestion . ", name: \"" . $searchQueryString . " (new suggestion)\"}" 

Answer 2

शॉन का जवाब देने के लिए जोड़ने के लिए (यानी आप वास्तव में एक नए आइटम के रूप में जोड़ने के लिए कुछ सर्वर साइड की जरूरत है डेटाबेस), आप चीजों के जावास्क्रिप्ट पक्ष को जोड़ने की अनुमति देने के लिए this change बनाने में सक्षम हो सकते हैं।

.blur(function() { 
     $(this).val(""); 
     if ($(".token-input-selected-dropdown-item").length>0) 
      add_token($(".token-input-selected-dropdown-item").data("tokeninput")); 
     hide_dropdown(); 
    }) 

Answer 3

मैं भी पहले आइटम का चयन करने में यदि वे खोज बॉक्स को बंद क्लिक onBlur समारोह बदल आईडी के साथ: 0 एक नई प्रविष्टि

Answer 4

यहाँ स्थानीय json

$("#input").tokenInput(yourjsondata,{ 
    preventDuplicates: false, 
    onResult: function (item) { 
     if($.isEmptyObject(item)){ 
       return [{id:'0',name: $("tester").text()}] 
     }else{ 
       return item 
     } 

    }, 
}); 

सब कुछ के साथ अपने समाधान है: इसकी अधिक उपयोगकर्ताओं के लिए सहज ज्ञान युक्त -

Answer 5

.php फ़ाइल में, थोड़ी देर से पहले, आप इसका उपयोग कर सकते हैं:

array_push($yourarray, array('id'=> 0 ,'name'=> $_GET["term"])); 

Answer 6

यह अब, इस प्लगइन का नवीनतम मास्टर में नियंत्रित किया जाता है allowFreeTagging विकल्प का उपयोग: https://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js#L57

संस्करण संख्या और डॉक्स 2 वर्षों में अपडेट नहीं किया गया है, तो आप मास्टर का उपयोग करना होगा।

Answer 7

मैंने स्टीवआर के उत्तर में कुछ कार्यक्षमताओं को जोड़ा है, क्योंकि मैं चाहता हूं कि परिणाम होने पर भी ड्रॉपडाउन के शीर्ष पर मूल्य दिखाई दे। इसके अलावा onAdd यदि आइटम का चयन किया databese में मौजूद नहीं है मैं इसे जोड़ना चाहते हैं:

$("#my_input").tokenInput(my_results_route), { 
    hintText: "Select labels", 
    noResultsText: "No results", 
    searchingText: "Searching...", 
    preventDuplicates: true, 
    onResult: function(item) { 
     if($.isEmptyObject(item)){ 
      return [{id:'0', name: $("tester").text()}]; 
     } else { 
      //add the item at the top of the dropdown 
      item.unshift({id:'0', name: $("tester").text()}); 
      return item; 
     } 
    }, 
    onAdd: function(item) { 
     //add the new label into the database 
     if(!parseInt(item.id)) { 
      //database insertion ajax call 
      console.log('Add to database'); 
     } 
    } 
}); 

Answer 8

$(document).ready(function() { 
      $("#expert").tokenInput("source.php", { 
       theme: "facebook", 
       noResultsText:'Skill Not Found - Enter to Add', 
       queryParam:'q', 
       onResult: function (item) { 
              if($.isEmptyObject(item)){ 
                return [{id:$("#token-input-expert").val(),name: $("#token-input-expert").val()+'*'}] 
              }else{ 
                return item 
              } 
       }, 
       preventDuplicates:true<?php if($expert_rank_json){?>, 
       prePopulate: <?php echo $expert_rank_json ?> 
       <?php } ?> 
      });