主页 / 问题 / 1102811
Accepted
Владислав Самохин
Asked:2020-03-30 19:57:18 +0000 UTC2020-03-30 19:57:18 +0000 UTC

在 html 元素 jquery 中查找文本匹配

  • 772

请告诉我如何隐藏div内容与input. 如果内容div="Один"是内容，input="од"则不div隐藏。

试图： 

$("#search_text").keyup(function(e) {
  var text = $("#search_text").val();
  if ($(".search_block div").text() != text) {
    $(this).hide;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_text">
<div class="search_block">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
  <div>Четыре</div>
  <div>Пять</div>
</div>

javascript

2 个回答

  1. Best Answer

    简短而清晰。自己化妆：

    $("#search_text").on('input', function() {
  let text = $("#search_text").val();
  $(".search_block > div").each(function() {
    if ($(this).text().search(new RegExp(`${text}`, 'i')) < 0 && text != '') {
      $(this).hide("slow");
    } else {
      $(this).show("slow");
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_text">
<div class="search_block">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
  <div>Четыре</div>
  <div>Пять</div>
</div>

    • 3

  2. 用正则搜索最好不要在这个任务中使用，因为 特殊字符会有问题，例如() . [] *，等。

    当然，您可以屏蔽它们，但这是无用的额外工作。

    [在此示例中尝试按字符搜索。

    $("#search_text").on('input', function() {
  let text = $("#search_text").val();
  $(".search_block > div").each(function() {
    if ($(this).text().search(new RegExp(`${text}`, 'i')) < 0 && text != '') {
      $(this).hide("slow");
    } else {
      $(this).show("slow");
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_text">
<div class="search_block">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
  <div>Четыре</div>
  <div>Пять</div>
  <div>Шесть[]</div>
</div>

    搜索最好通过indexOf.

    它工作得更快，对于这项任务来说已经足够了。

    $("#search_text").on('input', function() {
  let text = $("#search_text").val().toLowerCase();
  $(".search_block > div").each(function() {
    const $this = $(this);
    if ($this.text().toLowerCase().indexOf(text) === -1) {
      $this.hide("slow");
    } else {
      $this.show("slow");
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_text">
<div class="search_block">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
  <div>Четыре</div>
  <div>Пять</div>
  <div>Шесть[]</div>
</div>

    最后，性能Regexp和indexOf.

    const array = new Array(1000000).fill(1)

console.time('regexp');
const searchRegexp = new RegExp(`${'1'}`, 'i');
array.forEach(f => {
  const result = ('hello' + f).search(searchRegexp);
});
console.timeEnd('regexp');


console.time('indexof');
const searchStr = '1';
array.forEach(f => {
  const result = ('hello' + f).toLowerCase().indexOf(searchStr) === -1;
});
console.timeEnd('indexof');

    • 1

相关问题