Подсвечивание вводимого значения в поиске на js (input highlight onkeypress) | Блог веб-разработчика MaxGraph

Подсвечивание вводимого значения в поиске на js (input highlight onkeypress)

Привет! Сегодня расскажу, как сделать подсвечивание вводимого значения. Суть проста - Вы вводите что-то в инпут, а выборка у Вас подсвечивается в зависимости от введенного.

Чтобы сделать подсвечивание вводимого значения в поиске — нужно сперва подключить Jquery и специальный скрипт — jcfilter.js. Как всегда, в конце статьи будет пен :)

HTML-разметка

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="search">
  <input type="search" id="search" placeholder="Поиск по каталогу">
  <div class="search-result">
    <div class="jcorgFilterTextParent">
      <h3 class="name">Разделы каталога</h3>
      <div class="search-cont"> 
        <ul>
          <li><a href="#" class="jcorgFilterTextChild">Промышленные частотные преобразователи</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи для насосов</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Векторные частотные преобразователи</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи Овен</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи переменного тока</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи 24 А</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи 7,5 Квт</a></li>
        </ul>
      </div>
    </div>
    <div class="jcorgFilterTextParent">
      <h3 class="name">Товары</h3>
      <div class="search-cont"> 
        <ul>
          <li><a href="#" class="jcorgFilterTextChild">Промышленные частотные преобразователи</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи для насосов</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Векторные частотные преобразователи</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи Овен</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи переменного тока</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи 24 А</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи 7,5 Квт</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="search">
  <input type="search" id="search" placeholder="Поиск по каталогу">
  <div class="search-result">
    <div class="jcorgFilterTextParent">
      <h3 class="name">Разделы каталога</h3>
      <div class="search-cont"> 
        <ul>
          <li><a href="#" class="jcorgFilterTextChild">Промышленные частотные преобразователи</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи для насосов</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Векторные частотные преобразователи</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи Овен</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи переменного тока</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи 24 А</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи 7,5 Квт</a></li>
        </ul>
      </div>
    </div>
    <div class="jcorgFilterTextParent">
      <h3 class="name">Товары</h3>
      <div class="search-cont"> 
        <ul>
          <li><a href="#" class="jcorgFilterTextChild">Промышленные частотные преобразователи</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи для насосов</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Векторные частотные преобразователи</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи Овен</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи переменного тока</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи 24 А</a></li>
          <li><a href="#" class="jcorgFilterTextChild">Частотные преобразователи 7,5 Квт</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Простая разметка, но в ней есть определенные мелочи — это специальные классы для работы скрипта — jcorgFilterTextParent и jcorgFilterTextChild. Они как раз и определяют подсветку.

CSS

Все будет в пене. В целом здесь не очень важен css.

JS

1
2
3
4
5
$('.search input').jcOnPageFilter({
  highlightColor: "yellow",
  textColorForHighlights: "#333333",
  hideNegatives: false,
});
$('.search input').jcOnPageFilter({
  highlightColor: "yellow",
  textColorForHighlights: "#333333",
  hideNegatives: false,
});

По факту тут просто вызываем плагин и даем ему свои настройки. Сами настройки ниже:

Настройки

  1. animateHideNShow: true|false — можно скрывать контейнеры, которые не попадают под вводимое.
  2. focusOnLoad: true|false — фокусирование на поле поиска при загрузке.
  3. highlightColor — цвет подсветки текста (можно вводить hex и rgb).
  4. textColorForHighlights — цвет самого текста.
  5. parentLookupClass — класс родителя (по умолчанию jcorgFilterTextParent).
  6. childBlockClass — класс потомка (по умолчанию jcorgFilterTextChild).
  7. hideNegatives: true|false — скрывать родителей, у которых не совпадает текст, или нет.

Пен

По традиции, пен:

 

Надеюсь, Вам помогла данная статья. Успехов в использовании!

Метки: , ,

Понравилось? Оцени!
12345 (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *