javascript - 如何更改我搜索的文本颜色？

Question

我正在尝试提供搜索服务。如果我在输入框中键入 "v"，我会从 ajax 获取一个列表并显示它。

我想改变匹配部分的颜色。如果列表项是 "solve"，则 "v" 将为红色。

$('input[name="searchInput"]').on("propertychange change keyup paste input", function() {
  var currentVal = $(this).val();
  if (currentVal == oldVal) {
    return;
  }
  oldVal = currentVal;

  callHtml('@Url.Action("SearchInput", "Search")', {
    search: currentVal
  }, function(data) {
    if (data) {
      $("#searchResult").html(data);
    }
  })
})

我已经在 $("#searchResult").html(data); 下尝试了这段代码

$(".searchlist").replaceAll(currentVal, "<span>" + currentVal + "</span>");

但是没有用。

Answer 1

使用您在评论中提到的 HTML 结构，您可以使用 .find() 与 :contains 目标 <a> currentVal 中的元素找到了。

然后我会使用 .split()和 .join()将匹配项包装在 <span> 中(您也可以使用正则表达式 replace ，但它会因某些保留字符匹配而变得棘手)。

$("#searchResult")
  .html(data)
  .find(`a:contains(${currentVal})`)
  .html((idx,old) => old
    .split(currentVal)
    .join(`<span class="highlighted">${currentVal}</span>`)
  );

---

var oldVal;
$('input[name="searchInput"]').on("propertychange change keyup paste input", function() {
  var currentVal = $(this).val();
  if (currentVal == oldVal) {
    return;
  }
  oldVal = currentVal;

  //mock data
  var data = `<ul>
                <li><a>hello</a></li>
                <li><a>world</a></li>
                <li><a>hello world</a></li>
                <li><a>foobar</a></li>
                <li><a>boo</a></li>
                <li><a>far</a></li>
              </ul>`;

  $("#searchResult")
    .html(data)
    .find(`a:contains(${currentVal})`)
    .html((idx,old) => old
      .split(currentVal)
      .join(`<span class="highlighted">${currentVal}</span>`)
    );
    
});

span.highlighted {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="searchInput" placeholder="Search text">

<div id="searchResult"></div>

^{(请记住，此示例不是有条件地隐藏/显示匹配结果，只是演示突出显示)}