css 如何通过javascript制作一个搜索关键字，并且只显示关键字的片段？

w8f9ii69 于 2023-01-14 发布在 Java

关注(0)|答案(3)|浏览(193)

今天我有一个要求，希望在输入框中搜索关键字的时候，包含关键字的区块能够显示出来！而不是仅仅把关键字变成红色。目前进展：但目前我只能将关键字变为红色，遇到的困难：如何让没有关键词的片段消失，只有包含关键词的内容出现，我在这里遇到了困难，尝试了3个多小时，还是不知道如何实现，希望能得到大家的帮助，谢谢，下面的图片是我搜索关键词后所期待看到的。

$(function() {
  $("#js-search").on('click', function() {
    let keyword = $("#keyWord").val()
    $("p").each(function(index, el) {
      if (el.innerText.includes(keyword)) {
        el.innerText = el.innerText.replace(keyword, `<span class="red">${keyword}</span>`)
      }
      $(this).html(el.innerText);
    });
  });
});

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="keyWord" type="text"><button id="js-search">search</button>

<ul>
  <li>
    <h1>about giving back</h1>
    <p>This is the content of the answer about giving back</p>
  </li>
  <li>
    <h1>Credit Card Payment Issues</h1>
    <p>Credit card payment question content</p>
  </li>
  <li>
    <h1>return the goods</h1>
    <p>Content related to return issues</p>
  </li>
  <li>
    <h1>register</h1>
    <p>How to register as a member</p>
  </li>
</ul>

example output

css

来源：https://stackoverflow.com/questions/75097989/how-to-make-a-search-keyword-through-javascript-and-only-display-the-snippet-of

3条答案

按热度按时间

cqoc49vn1#

这将解决您的问题，它隐藏父元素，如果它不包含您搜索的单词，否则它将显示

$(function() {
  $("#js-search").on('click', function() {
    let keyword = $("#keyWord").val()
    $("p").each(function(index, el) {
      if (el.innerText.includes(keyword)) {
        // Without the following line the elements that you already get them as a result previously, will still hidden so you need to show them again
        $(el).parent().show();
        el.innerText = el.innerText.replace(keyword, `<span class="red">${keyword}</span>`)
      } else {
        $(el).parent().hide();
      }
      $(this).html(el.innerText);
    });
  });
});

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="keyWord" type="text"><button id="js-search">search</button>

<ul>
  <li>
    <h1>about giving back</h1>
    <p>This is the content of the answer about giving back</p>
  </li>
  <li>
    <h1>Credit Card Payment Issues</h1>
    <p>Credit card payment question content</p>
  </li>
  <li>
    <h1>return the goods</h1>
    <p>Content related to return issues</p>
  </li>
  <li>
    <h1>register</h1>
    <p>How to register as a member</p>
  </li>
</ul>

赞(0）回复(0）举报 2023-01-14

bhmjp9jg2#

这很简单，你只需要隐藏与你的关键字不匹配的元素的父元素。
就像这样：

$(function() {
  $("#js-search").on('click', function() {
    let keyword = $("#keyWord").val()
    $("p").each(function(index, el) {
      if (el.innerText.includes(keyword)) {
        el.innerText = el.innerText.replace(keyword, `<span class="red">${keyword}</span>`)
      }
      else{
        $(el).closest("li").hide();
      }
      $(this).html(el.innerText);
    });
  });
});

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="keyWord" type="text"><button id="js-search">search</button>

<ul>
  <li>
    <h1>about giving back</h1>
    <p>This is the content of the answer about giving back</p>
  </li>
  <li>
    <h1>Credit Card Payment Issues</h1>
    <p>Credit card payment question content</p>
  </li>
  <li>
    <h1>return the goods</h1>
    <p>Content related to return issues</p>
  </li>
  <li>
    <h1>register</h1>
    <p>How to register as a member</p>
  </li>
</ul>

赞(0）回复(0）举报 2023-01-14

taor4pac3#

你必须隐藏和显示父母：

$(function() {
  $("#js-search").on('click', function() {
    let keyword = $("#keyWord").val()
    $("p").each(function(index, el) {
      if (el.innerText.includes(keyword)) {
        el.innerText = el.innerText.replace(keyword, `<span class="red">${keyword}</span>`)
        $(el).parent().show()
      }else $(el).parent().hide()
      $(this).html(el.innerText);
    });
  });
});

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="keyWord" type="text"><button id="js-search">search</button>

<ul>
  <li>
    <h1>about giving back</h1>
    <p>This is the content of the answer about giving back</p>
  </li>
  <li>
    <h1>Credit Card Payment Issues</h1>
    <p>Credit card payment question content</p>
  </li>
  <li>
    <h1>return the goods</h1>
    <p>Content related to return issues</p>
  </li>
  <li>
    <h1>register</h1>
    <p>How to register as a member</p>
  </li>
</ul>

赞(0）回复(0）举报 2023-01-14

我来回答

css 如何通过javascript制作一个搜索关键字，并且只显示关键字的片段？

3条答案

相关问题

热门标签

最新问答