jQuery在表格和標籤數據中搜索

我有類型和過濾器表數據（http://jsfiddle.net/tutorialdrive/YM488/）的html和jquery代碼，並在同一個輸入框中鍵入和標記數據，但我想合併兩者。

我有標籤碼，但也失去了它的庫名，所以我無法添加上的jsfiddle，

即當我在搜索名稱，或點擊表格數據（01名姓等）。數據應在上面的標籤區域進行標記（測試x，測試x）。

enter image description here

這裏是我的HTML和jQuery代碼表搜索

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代碼

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

來源

2013-05-10 Shivam Pandya

你能描述你的問題更 – 2013-05-10 06:23:23

@Ganesh，好吧，我嘗試添加標籤設施我有它的代碼，但我想添加更多的東西，在「搜索區域」上面的圖片時，當我鍵入一些東西，表格數據過濾（演示在jsfiddle）。在標籤區域中，我可以按照類型添加標籤，但是我需要做的是當我點擊表格數據的數據和數據時添加到上面的標籤區域。 – 2013-05-10 06:28:36

只要輸入是小寫字母就可以使用...更改術語賦值爲'var term = $（this）.val（）。toLowerCase（）;' – Orangepill 2013-05-10 06:34:24

由於您沒有提供令牌小部件，並且因爲您使用的是jQuery，我可能會建議使用UI小部件Select2。它似乎比Chosen有更多的功能，更廣泛的支持和更好的文檔（在評論中建議）。

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

我是在一個類似的UI搜索小插件前一陣子。然而，我的問題因爲某些原因而關閉。

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

如果你問某人制定出所有的實現代碼對你來說，我可能會建議https://www.odesk.com/

來源

2013-05-10 07:57:39 Serhiy

在給定的URL @「對外部價值變化作出反應」中，我不想這麼做。但是有一點缺失，就像我的圖片一樣，當用戶按下回車鍵時，如何標記文本？在你的鏈接標籤區域發生的事情，我希望它在搜索區域。 – 2013-05-10 09:24:39

jQuery在表格和標籤數據中搜索

回答

相關問題