Как сделать поиск по data атрибутам?

Question

[hrvasiliy]

Пытаюсь сделать что-то вроде этого: codepen.io вроде бы то, что надо (потому что используется поиск именно по data-*). Но данный вариант не устраивает, потому что используются стили для скрытия элементов, выглядит как какой-то костыль + в самих атрибутах хранятся данные в разном регистре, что не дает установить стили при вводе (либо пользователю нужно четко придерживаться регистру). Смог разобраться, что надо использовать show() и hide() только пока не очень понимаю как.

Answer 1

[Alex]

Лучше разделить представление и логику. Ищите элементы, и на подходящие (или не подходящие) навешивайте класс. А через CSS уже делайте с этим классом что угодно: скрывайте, подсвечивайте, забледняйте.

Мой пример: codepen.io/isqua/pen/yOXyVP

Небольшая справка по методам, которые я использую:
querySelectorAll
dataset
classList
map
filter
forEach
some
indexOf

Comments

[hrvasiliy]

Как я уже говорил, данный способ плох тем, что data-search может быть в разных регистрах, а не только в нижнем.

[Alex]

hrvasiliy: Тогда просто приводите data-search к нижнему регистру в момент сравнения. Обновил пример.

[hrvasiliy]

isqua: Неплохо! Спасибо Вам!

[hrvasiliy]

isqua: Скажите, а может быть как-то можно заменить в данном скрипте: jsfiddle.net/9m53ojo9/3 Чтобы не учитывался регистр при show()? Вот в этой строке:
$(".data[data-value*='"+ input +"']").show();

[Alex]

hrvasiliy: Нет, в селекторе нельзя сделать регистронезависимую выборку. А чем вам не подошло с получением объектов и навешиванием класса?

[hrvasiliy]

isqua: Ваш вариант хороший, но я думал, если получится написать скрипт меньше по объему, то это лучше

[Alex]

hrvasiliy: Меньше по объёму не всегда лучше, не всегда быстрее, не всегда удобнее поддерживать.

[hrvasiliy]

isqua: Не могли бы вы еще подсказать? Я немного обновил скрипт: codepen.io/anon/pen/yOXgEa . Поиск по странице происходит по нескольким страницам, в коде я условно разделил их на 3. Допустим мы находимся на 1-й странице и вводим: "Paul Malker" который находится на третьей странице, соответственно, находясь на первой странице мы не увидим этого имени, нужно переключиться на 3-ю страницу, чтобы увидеть это имя. Есть ли способ этот вопрос как-то решить?

[Alex]

hrvasiliy: Не понял, что нужно решить. Что такое у вас будет страница? Это просто скрытый блок? Что нужно сделать? Показывать только одну «страницу» в один момент времени», или показывать ту, в которой есть результаты?