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 г.