19 марта 2015 г.
Check out the original post on my blog
Сделайте поиск удобным для пользователя
Поиск является ключевой функцией почти каждого сайта, который вы используете, и каждого сайта, который вы когда-либо создавали. Для некоторых сайтов функциональность поиска может быть разницей между сохранением пользователя или его потерей конкуренту. Единственная функция Google — это поиск, и они стоят более 300 миллиардов долларов. Важно сделать поиск максимально удобным для пользователя.
Отличным примером чрезвычайно удобного поиска является Product Hunt. Они используют Алголию, которая обеспечивает простое нечеткое сопоставление, результаты в реальном времени и выделяет совпадающие слова на странице. Их цена высока для малобюджетных проектов, но реализовать собственную подсветку совпадающих слов очень просто!
Выполнение
Во-первых, нам нужно получить то, что искал пользователь, и разбить его на отдельные слова. Это помогает с базовым нечетким сопоставлением. В противном случае ему пришлось бы найти точное совпадение с тем, что пользователь ввел в поле поиска. Это легко сделать в JavaScript:
Затем нам нужно найти условия поиска на странице. Селектор jQuery :contains отлично подходит для этого, поэтому нам нужно отобразить наш массив слов в селектор jQuery.
Теперь у нас есть все настройки для захвата элементов DOM, соответствующих нашему запросу. Я запустил бенчмарк jsPerf, чтобы увидеть наиболее эффективный способ выполнения этого запроса, и этот оказался лучшим на сегодняшний день. Это предполагает, что ваши результаты поиска являются дочерними элементами элемента li, но это можно легко переписать с помощью td или чего-то еще.
Почти готово! У нас есть все совпадающие результаты поиска, нам просто нужно выделить их! К сожалению, это самая сложная часть. Мы можем использовать замену регулярного выражения, чтобы обернуть условия поиска диапазоном, который будет выделять их на странице.
Регулярное выражение будет сгенерировано из слов, массива, который у нас был выше, который содержал слова, которые искал пользователь. Мы будем использовать флаги g (глобальные) и i (без учета регистра), чтобы регулярное выражение заменяло все совпадения в строке независимо от регистра.
Затем мы используем это регулярное выражение, чтобы найти наши условия поиска, и обернуть их диапазоном с выделением класса, который мы определим, чтобы придать им цвет фона. $& будет заменен соответствующим текстом.
Для класса подсветки:
Окончательный код:
Гочки
Если вы попытаетесь использовать это, вы можете заметить, что оно чувствительно к регистру. Это связано с тем, что :contains чувствителен к регистру. Чтобы обойти это, мы должны написать собственный :containsi, нечувствительный к регистру. Я позаимствовал этот код из этого поста StackOverflow.
Затем просто замените :contains выше на :containsi.
Первоначально опубликовано на nylad.me 19 марта 2015 г.