Question

我有一个搜索框，当我输入时，表格数据会被过滤掉，只显示匹配的结果。它很棒;但是，我想让它变得更好。

我希望代码忽略空格和破折号。我更愿意在将来添加我想要忽略的其他字符。

例如......

Product Table FH-54 TDN 256 TDN25678 FH54

在搜索框中，如果我输入FH54，我会同时显示FH-54和FH54。如果我输入FH-54，我也希望显示FH54和FH-54等等，以便包括FH 54。

如果我在搜索框中输入TDN2或TDN 2，我希望显示TDN 256和TDN25678。

<b>Product Search</b><br /><form class="formatted">
<input id="Search" data-class="search_product" type="text" /></form>

<script type="text/javascript">

            $('#Search').on('keyup', function(e) {
  $("#noData").remove();
  var value = $(this).val();
  value = value.replace(/\\/g, '');
  var patt = new RegExp(value, "i");
  var sw = 0;
  var counter = 0;
  $('#Data tbody').find('tr').each(function() {
    counter++;
    if (!($(this).find('td').text().search(patt) >= 0)) {
      $(this).not('#header').hide();
      sw++;
    } else if (($(this).find('td').text().search(patt) >= 0)) {
      $(this).show();
    }
  });
  if (sw == counter) {
    $("#Data tbody").append(`<tr id="noData">
                  <td colspan="3">No data</td>
                </tr>`);
  } else {
    $("#noData").remove();
  }
});
        </script>

Answer 1

我试图尽我所能重建你的场景，并做了一个有效的例子。

根据您的要求忽略所有空格和短划线：如何从搜索字符串和列中的值中删除空格和短划线？

＆＃13;

$('#Search').on('keyup', function(e) {
    $("#noData").remove();
    var value = $(this).val();
    var spacesAndDashes = /\s|-/g;
    value = value.replace(spacesAndDashes, "");
    var patt = new RegExp(value, "i");
    var sw = 0;
    var counter = 0;
    $('#Data tbody').find('tr').each(function() {
        counter++;
        if (!($(this).find('td').text().replace(spacesAndDashes, "").search(patt) >= 0)) {
            $(this).not('#header').hide();
            sw++;
        } else if (($(this).find('td').text().replace(spacesAndDashes, "").search(patt) >= 0)) {
            $(this).show();
        }
    });
    if (sw == counter) {
        $("#Data tbody").append(`<tr id="noData">
                <td colspan="3">No data</td>
                </tr>`);
    } else {
        $("#noData").remove();
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b>Product Search</b>

<br />

<form class="formatted">
    <input id="Search" data-class="search_product" type="text" />
</form>

<table id="Data">
    <thead>
        <tr>
            <th>Product Table</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>FH-54</td>
        </tr>
        <tr>
            <td>TDN 256</td>
        </tr>
        <tr>
            <td>FH54</td>
        </tr>
        <tr>
            <td>FH 54</td>
        </tr>            
        <tr>
            <td>TDN25678</td>
        </tr>
    </tbody>
</table>

＆＃13;

忽略javascript搜索代码

1 个答案: