ricerca jquery nei dati di tabelle e tag

Question

Come faccio?

Ho codice html e jquery per dati tabella tipo e filtro (http://jsfiddle.net/tutorialdrive/YM488/) e digitare e codificare i dati nella stessa casella di input, ma voglio unirli entrambi.

Ho codice tag anche ma ha perso il suo nome della libreria, quindi sono in grado di aggiungere che il jsfiddle,

cioè quando digito in nome ricerca, clicca su dati della tabella (01 Nome Cognome, etc.). I dati dovrebbero essere taggati nell'area di tag sopra (test x, test x).

Ecco il mio codice HTML e jQuery per la ricerca nella tabella

HTML

 <!-- 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 Codice

 /* 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

Dato che non hai fornito un widget token e dato che stai usando jQuery, ti suggerisco il widget UI Select2. Sembra avere più funzioni, un supporto più ampio e una documentazione migliore di quella scelta (suggerito nei commenti).

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

ero su una ricerca di una simile interfaccia utente widget di tempo fa. La mia domanda è stata comunque chiusa per qualche motivo.

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

Se ti stai chiedendo per qualcuno a lavorare fuori tutto il codice di implementazione per voi, potrei suggerire https://www.odesk.com/