如何将css添加到与搜索框中的单词匹配的div中的单词？ [复制]

Posted 2023-03-06

【中文标题】如何将css添加到与搜索框中的单词匹配的div中的单词？ [复制]

【英文标题】：How can I add css to a word inside a div that matches the word from the search box? [duplicate]

【发布时间】：2019-07-23 22:05:52

【问题描述】：

我有一个搜索框，您可以在其中搜索单词，页面将在页面描述中显示搜索到的单词（意思是如果您搜索的单词在页面描述中，那么它将显示一个链接到页面和页面的描述）。我需要能够从结果中显示的描述中获取搜索的词，我需要在描述中突出显示该词。 这是我到目前为止所拥有的。但这不起作用。

var searchValue = $(".search-query").val(); //searchValue is the word you type in the input box

$( ".searchResults-description:contains('" + searchValue + "')").css("background-color", "#fadcd9" ); 

请帮忙！当我点击搜索时，这个词会留在我的搜索框中。页面重新加载后，我将其重新放入输入框中。但我不需要在描述 div 中突出显示这个词，无论这个词出现在哪里。

【问题讨论】：

你能解释一下什么不起作用吗？我已经在这种情况下测试了你的代码，它工作正常jsfiddle.net/qht2xy4g

tl;dr OP 的搜索框是什么，用作描述的过滤 CMD/CTR + F。仅突出显示描述中的实际单词。

OP，请添加一些html以便我们知道描述的格式

【参考方案1】：

您在页面加载时检查搜索框的值，因此searchValue 变量始终为空。您需要做的是在输入更改时获取值。一种方法是使用keyup function。这应该可以帮助您开始：

$(function() 

  $('.search-query').keyup(function() 
    var searchValue = $(".search-query").val();
    $( ".searchResults-description:contains('" + searchValue + "')").css("background-color", "#fadcd9" );
  );

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="search-query" />

<div class="searchResults-description">Lorem</div>
<div class="searchResults-description">Ipsum</div>

【讨论】：

我的意思是......我们真的不知道......它可能只是被排除在问题之外。在这种情况下，我们甚至不知道“不工作”是什么意思。

它甚至不起作用

Yes it does.

输入“L”，然后按退格键。

“这应该让你开始。”我只是在解释为什么 OP 提供的代码不起作用。我不会假设知道他们正在寻找的确切功能。