Как изменить цвет текста, который я ищу?

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>

^{(Имейте в виду, что в этом примере условно не скрывается / не показывается совпадающий результат, а просто демонстрируется выделение)}