Выделите условия поиска на jquery keyup с помощью плагина выделения jquery

Question 1

Хорошо, я пытаюсь выделить условия поиска из текстового поля поиска на моей HTML-странице. Я использую плагин выделения jQuery здесь плагин выделения jQuery, чтобы попытаться достичь это. Я все еще не разбираюсь в jQuery, так что извините, если это звучит слишком глупо

Проблема в том, что он выделяет только первый введенный в текстовое поле символ, а остальные игнорируются.

Highlight.js можно найти здесь

Вот мой код

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test page for Highlight Search Terms</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="highlight.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $('#search').on('keyup', function(){
            $('.x').highlight($(this).val());

    });    
});
</script>
<style type="text/css">
  .highlight {
    font-weight: bold;
  }
</style>
<body>
  <input type="text" id="search"></input>
   <p class="x">Highlight plugin searches through the text of given elements
    in this case to find the term (word 'highlight' in our example) to 
    highlight. When the term is found it's simply wrapped with </p>
</body>
</html>

Я хочу, чтобы он соответствовал каждому поисковому запросу из текстового поля в абзаце и выделил его жирным шрифтом. Что я делаю неправильно? Спасибо

jquery highlight

2

Joseph N. 9 Апр 2013 в 22:31

1

Попробуйте снять выделение с абзаца, прежде чем делать больше выделения.

–

Kevin B

9 Апр 2013 в 22:40

Спасибо, отлично сработало!

–

Joseph N.

9 Апр 2013 в 23:26

Answer

Всякий раз, когда что-то выделяется, он добавляет тег диапазона для слова, которое вы ищете. В вашем случае вам нужно отменить выделение предыдущего выделенного текста, чтобы удалить диапазон, добавленный плагином. Вы можете попробовать это следующим образом. Надеюсь, это сработает

    <script>
    $(document).ready(function(){
        $('#search').on('keyup', function(){
            console.log($(this).val());
                $('.x').unhighlight();
                $('.x').highlight($(this).val());

        });    
    });
    </script>

5

Saurav Pandit 9 Апр 2013 в 22:51

У меня тоже есть решения! Спасибо брат.

–

Rajnikant Kakadiya

31 Май 2013 в 17:22

Question 2

Всякий раз, когда что-то выделяется, он добавляет тег диапазона для слова, которое вы ищете. В вашем случае вам нужно отменить выделение предыдущего выделенного текста, чтобы удалить диапазон, добавленный плагином. Вы можете попробовать это следующим образом. Надеюсь, это сработает

    <script>
    $(document).ready(function(){
        $('#search').on('keyup', function(){
            console.log($(this).val());
                $('.x').unhighlight();
                $('.x').highlight($(this).val());

        });    
    });
    </script>

5

Saurav Pandit 9 Апр 2013 в 22:51

У меня тоже есть решения! Спасибо брат.

–

Rajnikant Kakadiya

31 Май 2013 в 17:22

Выделите условия поиска на jquery keyup с помощью плагина выделения jquery

1 ответ

Похожие вопросы

Новые вопросы

jquery