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在表格和标签数据中搜索

回答

相关问题