तालिका और टैग डेटा में jquery खोज

Question

मैं यह कैसे कर सकता हूं?

मेरे पास प्रकार और फ़िल्टर तालिका डेटा (http://jsfiddle.net/tutorialdrive/YM488/) के लिए HTML और jquery कोड है, और उसी इनपुट बॉक्स में टाइप करें और टैग करें, लेकिन मैं दोनों को मर्ज करना चाहता हूं।

मैं जब मैं खोज नाम लिखने पर भी टैग कोड है, लेकिन इसकी लाइब्रेरी नाम तो खो दिया है मैं जोड़ने के लिए jsfiddle पर असमर्थ हूँ,

यानी, या पर क्लिक करें तालिका डेटा (01 नाम अंतिम नाम, आदि)। उपरोक्त टैग क्षेत्र में डेटा टैग किया जाना चाहिए (परीक्षण एक्स, परीक्षण एक्स)।

यहाँ मेरी एचटीएमएल और तालिका में खोज के लिए jQuery कोड है

एचटीएमएल

 <!-- table for search and filter start --> 
    <label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/> 


    <table id="my-table" border="1" style="border-collapse:collapse"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Sports</th> 
       <th>Country</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Sachin Tendulkar</td> 
       <td>Cricket</td> 
       <td>India</td> 
      </tr> 
      <tr> 
       <td>Tiger Woods</td> 
       <td>Golf</td> 
       <td>USA</td> 
      </tr> 
      <tr> 
       <td>Maria Sharapova</td> 
       <td>Tennis</td> 
       <td>Russia</td> 
      </tr> 
     </tbody> 
    </table> 

    <!-- table for search and filter ends --> 

jQuery कोड

 /* jquery for search nad filter table start*/ 

    $(document).ready(function(){ 
     // Write on keyup event of keyword input element 
     $("#kwd_search").keyup(function(){ 
      // When value of the input is not blank 
     var term=$(this).val() 
      if(term != "") 
      { 
       // Show only matching TR, hide rest of them 
       $("#my-table tbody>tr").hide(); 
      $("#my-table td").filter(function(){ 
       return $(this).text().toLowerCase().indexOf(term) >-1 
      }).parent("tr").show(); 
      } 
      else 
      { 
       // When there is no input or clean again, show everything back 
       $("#my-table tbody>tr").show(); 
      } 
     }); 
    }); 

    /* jquery for search nad filter table ends*/ 

Answer 1

चूंकि आपने टोकन विजेट प्रदान नहीं किया है और चूंकि आप jQuery का उपयोग कर रहे हैं, तो मैं यूआई विजेट चयन 2 का सुझाव दे सकता हूं। ऐसा लगता है कि चुनिंदा (टिप्पणियों में सुझाए गए) की तुलना में अधिक सुविधाएं, व्यापक समर्थन और बेहतर दस्तावेज हैं।

http://ivaynberg.github.io/select2/

मैं एक ऐसी ही यूआई के लिए एक खोज पर था थोड़ी देर पहले विजेट। हालांकि मेरा सवाल कुछ कारणों से बंद था।

https://stackoverflow.com/questions/11727844/is-there-an-approximate-alternative-to-harvests-chosen-out-there

आप किसी को आप के लिए सभी कार्यान्वयन कोड बाहर काम करने के लिए पूछ रहे हैं, तो मैं सुझाव है कि शायद https://www.odesk.com/