时间戳

首页 > 解决方案 > 使用任意字符串查询表

javascript - 使用任意字符串查询表

问题描述

我正在尝试过滤表值。我的代码只能使用一个字符串/单词过滤表格。如果您输入多个字符串，它将不显示任何结果。我想要的是使用我输入的任何单词/字符串来显示结果。

这是我的代码：

$(document).ready(function(){
  $("#getInput").on("click", function() {
    var value = $(myInput).val().toLowerCase();
    $("#table_filter_router tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

HTML

            <form>
              <div class="slds-form-element slds-form-element__control slds-input-has-icon_left">
                <input type="text" class="slds-input slds-input_md" name="code" id="myInput" placeholder="Search router brand or model here...">
                <button type="submit" id="getInput" title="Search"><i class="icn icn-search"></i>
                </button>
              </div>
            </form>
			
		<table class="" id="table_filter_router" border="0">
          <thead>
            <tr>
              <th width="25%">H1</th>
              <th width="25%">H2</th>
              <th width="25%">H3</th>
              <th width="25%">H4</th>
            </tr>
          </thead>
		  <tbody>
            <!--sample-->
            <tr>
              <td width="25%">set1</td>
              <td width="25%">blue</td>
              <td width="25%">Four</td>
              <td width="25%">YES</td>
            </tr>

            <tr>
              <td width="25%">set2</td>
              <td width="25%">red</td>
              <td width="25%">seven</td>
              <td width="25%">NO</td>
            </tr>
            </tbody>
        </table>

标签： javascripthtml

解决方案

$(document).ready(function() {
    // Make jQuery :contains Case-Insensitive
    $.expr[":"].contains = $.expr.createPseudo(function(arg) {
        return function( elem ) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    });
    $("#btn-search").on("click", function() {
        const searchVal = $(this).prev('input').val();
        if( searchVal.length == 0 )
          alert('please input some text');
        const $trs = $('table tbody tr');
        $trs.hide();
        $trs.filter(":contains('" + searchVal + "')").show();
    });
    $("#btn-multiple-search").on("click", function() {
        const searchVal = $(this).prev('input').val();
        if( searchVal.length == 0 )
          alert('please input some text');
        let words = searchVal.split(' ');
        words = words.map(w => ":contains('" + w + "')").join('');
        const $trs = $('table tbody tr');
        $trs.hide();
        $trs.filter(words).show();
    });
});
<!doctype html>
<html lang="en">
   <head></head>
   <body>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <form>
         <div>
            <input type="text" class="slds-input slds-input_md" placeholder="Search one word"/>
            <button type="button" id="btn-search"> Search
            <i class="icn icn-search"></i>
            </button>
         </div>
         <div>
            <input type="text" class="slds-input slds-input_md" placeholder="Search multiple words"/>
            <button type="button" id="btn-multiple-search"> Search
            <i class="icn icn-search"></i>
            </button>
         </div>
      </form>
      <table border="0">
         <thead>
            <tr>
               <th width="25%">H1</th>
               <th width="25%">H2</th>
               <th width="25%">H3</th>
               <th width="25%">H4</th>
            </tr>
         </thead>
         <tbody>
            <!--sample-->
            <tr>
               <td width="25%">set1</td>
               <td width="25%">blue</td>
               <td width="25%">Four</td>
               <td width="25%">YES</td>
            </tr>
            <tr>
               <td width="25%">set2</td>
               <td width="25%">red</td>
               <td width="25%">seven</td>
               <td width="25%">NO</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

推荐阅读