如何使用引导过滤器按首字母搜索名称答案

【问题标题】：how to use bootstrap filter for searching a name by first letter如何使用引导过滤器按首字母搜索名称
【发布时间】：2020-07-06 22:16:19
【问题描述】：

我正在使用引导过滤器进行搜索。但是，例如，当我输入 'n' 时，它会显示所有带有 'n' 的名称，例如 nathan, arjan 。我不想要那个。我想要这样：如果我输入“n”，它将只显示以“n”开头的名称，例如 nathaan,narima。我的blade.php代码在这里：

<input class="form-control" id="myInput" type="text" placeholder="Search..">
<tbody id="myTable">
  <tr>
    <td>John</td>
  </tr>
  <tr>
    <td>Anja</td>
  </tr>  
</tbody>

我的脚本部分在这里

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

您可以使用一个名为startsWith 的方法。可以在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith找到文档

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().startsWith(value))
    });
  });
});
</script>

【讨论】：

【解决方案2】：

您可以根据需要更改方法。

$("#myInput").bind("keyup", function() {
    var text = $(this).val().toLowerCase();
    var items = $("tr td");

    //first, hide all:
    items.parent().hide();

    //show only those matching user input:
    items.filter(function () {
        return $(this).text().toLowerCase().indexOf(text) == 0;
    }).parent().show();
});

【讨论】：

【解决方案3】：

另一种方法是使用RegExp:

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      /* $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) */
      const searchRegEx = new RegExp(`^${value}`, 'i');
      $(this).toggle(searchRegEx.test($(this).text().trim()));
    });
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<input class="form-control" id="myInput" type="text" placeholder="Search..">
<table class="table table-bordered">


  <tbody id="myTable">
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Anja</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案4】：

使用 .charAt(0) 来过滤结果集以匹配第一个字符来自w3schools的基本示例已修改

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="filterBy()" placeholder="Search..." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>  
  <tr>
    <td>Marimba</td>
    <td>Something</td>
  </tr>
    <tr>
    <td>Marimba</td>
    <td>Something</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

<script>
function filterBy() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      if (txtValue.toUpperCase().charAt(0) ==  filter.charAt(0)) {
          tr[i].style.display = "";
        }
      } else {
        tr[i].style.display = "none";
      }
      if(filter.length == 0)
      {
          tr[i].style.display = "";
      }
    }       
  }
}
</script>

</body>
</html>

【讨论】：