Множество UI компонент содержат встроенный поиск или фильтрацию. Например, инструмент фильтрации в Webix DataTable.
Поиск и фильтрация есть во многих дата-виджетах Webix. В этой статье мы расскажем, как улучшить существующий механизм отображения найденных данных, а именно, реализуем подсветку найденных фрагментов текста, чтобы сделать результаты поиска/фильтрации более наглядными.
Рис.1 Результат поиска с подсветкой найденных данных
В эко-среде Webix поиск и подсветка могут быть реализованы в виде комбинации двух существующих свойств:
- общая фильтрация данных,
- конкретный шаблон столбца (для datatable) или компоненты (для list и dataview).
Говоря кратко, все, что Вам нужно, это:
- Запомнить искомый текст.
- Использовать его для фильтрации данных.
- Использовать его в шаблоне, чтобы найти и отметить все совпадения.
В данном примере UI состоит из двух виджетов: Text (отдельное поле для фильтрации) и Datatable.
Шаг 1.
Для начала, настроим обработчик onTimedKeyPress для ввода текста. Здесь мы можем получить текущее значение входных данных и использовать его для фильтрации.
on: {
onTimedKeyPress: function() {
const value = this.getValue();
findText(value);
}
}
Шаг 2. Фильтрация и запоминание значения.
findText активирует фильтрацию и сохраняет значение для дальнейшего использования. Мы также используем RegExp, чтобы избежать специальных символов в сохраненном значении, если таковые имеются:
/* store text that should be highlighted */
text = text || "";
escapedSearchText = text.replace(charactersSet, "\\$&");
/* filter data */
table.filter(filteringFunction)
};
Шаг 3. Настройка шаблона.
Так как мы уже вызвали фильтрацию, виджет Datatable покажет результат. В этот момент отфильтрованные данные отобразятся в соответствии с шаблоном.
columns:[{
id:"title",
template: searchColumnTemplate
}],
Мы снова используем RegExp, чтобы найти искомый текст и добавить span с определенным CSS:
let search = escapedSearchText;
if (search) {
value = addTextMark(value, search);
}
return value;
};
function addTextMark(value, text) {
const checkOccurence = new RegExp("(" + text + ")", "ig");
return value.replace(
checkOccurence,
"<span class='search_mark'>$1</span>"
);
}
Вы можете посмотреть результаты работы этой модификации в следующем демо-примере.
С исходным текстом данной заметки Вы можете ознакомиться в этом блоге GitHub.
Предлагаем Вам обсудить детали или поделиться примерами в комьюнити блоге Webix.
PS
Возможно, Вы задаетесь вопросом почему данная функциональность не реализована в Webix сразу «из-коробки»? Дело в том, что Webix предлагает web-инструментарий, набор методов и настроек для работы с данными и их отображения. Более специфические вещи, такие как подсветка текста, остаются на усмотрение конечных пользователей (разработчиков), которые сами решают что и как будет делать их web приложение. Баланс функциональности и простоты делает Webix именно тем продуктом, который ценят за скорость и наглядность разработки. Мы стараемся не перегружать наш UI framework излишним количеством фич, но даем мощный инструментарий для реализации любой UX на стороне разработчиков. Если Вы еще не пробовали Webix в работе — скачайте бесплатный пакет, чтобы создать свое web-приложение.
