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>的{{1}}元素。

然后我将使用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;
}

^{（请注意，此示例并非有条件地隐藏/显示匹配结果，只是演示突出显示）}

如何更改我搜索的文字颜色？

1 个答案: