Question

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

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

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

请帮助！当我单击“搜索”时，单词保留在我的搜索框中。重新加载页面后，我将其拍回了输入框中。但我不需要在说明div中突出显示该单词，无论该单词出现在哪里。

Answer 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>

如何在与搜索框中的单词匹配的div中的单词中添加CSS？

1 个答案: