Поиск на jquery - выделение найденного текста

Question

Суть:Добрый день! Имеется простенькая форма поиска на бутстрапе. Ищет статьи с совпавшим текстом. Скрин ниже.
Цель:Нужные статьи-то он находит, а вот текст найденный не выделяет. Нужно реализовать выделение.
Код, реализующий поиск:

$('#search').on('keyup', function() {
  var value = $(this).val().toLowerCase();
  $('.article').filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

#search соответственно это айди инпута поиска, а .article - класс статей, в которых ищет текст. Что сюда дописать нужно, чтобы появлялось выделение найденного текста в статьях? Хелп ми плиз!
Попробовал пошариться в нэте - не очень успешно.
Пишу первый раз здесь, надеюсь хоть кто-то прочитает))

Answer 1

Попробуйте так. В вашем случае должно работать.

$('#search').on('keyup', function() {

    var value = $(this).val().toLowerCase();

    $('.article').filter(function() {

        var is_compare = $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);

        if(is_compare) {
            $(this).css('background', 'yellow');
        }

        return is_compare;

    });

});

Answer 2

Вот так ещё можно, как вариант. Только неплохо ещё проверку вставить на наличие "<font class="sot">" для изменяемых элементов.

<style>
    .sot {
        color:#F00;
    }
</style>
<script>
    $('#search').on('keyup', function() {
        var value = "123";
        $('.article').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            nt = $(this).text();
            $(this).html(nt.replace(value, "<font class=\"sot\">"+value+"</font>"));
        });
    });
</script>

БЛОГ НА HUSL

Поиск на jquery - выделение найденного текста

Ответы (2 шт):