Перейдите к имени пользователя на веб-странице, если на клавиатуре нажата первая буква имени
У меня есть страница со списком примерно из 500 имен.
Пользователь хотел бы ввести, например, s на своей клавиатуре, а затем страница автоматически прокрутится до имен, начинающихся с s.
Должен ли я преобразовать первую букву этих имен в INT, указать это значение INT в качестве атрибута данных и добавить функцию jQuery на страницу или есть лучшее решение?
3 answers
Я бы предложил встроить список имен для каждого символа в div с соответствующим id, например, для имен, начинающихся с S:
<div id="S">
... names with S ...
</div>
Затем вы можете использовать jQuery для реагирования на нажатие клавиши и просто выполнить
location.href = '#S';
Затем браузер автоматически перейдет к соответствующему div. Еще одним преимуществом этого является то, что вы даже можете использовать URL-адрес, чтобы поместить его в избранное, поэтому, если вы хотите перейти непосредственно ко всем людям с S, вы можете сделать это легко.
Обновление: Поскольку функция .keypress() jQuery возвращает только число, а не сам символ, вам необходимо преобразовать его. Смотрите Преобразование символа в код ASCII в Javascript для примера того, как преобразовать символ в число и наоборот.
Если вы ищете что-то немного быстрее, вы можете выполнить следующий трюк (я предполагаю, что имена упорядочены).
Вы добавляете к первому элементу, у которого есть определенная буква id="letter_X", и когда пользователь прокручивает, вы просто используете идентификатор в качестве привязки (my_url#letter_X).
Это самый быстрый способ, который я знаю для этого, но он работает только для одной буквы.
PS: в html5 якоря теперь являются идентификаторами элементов и могут быть добавлены к любому элементу html.
Я думаю, вам следует использовать раздел с идентификатором для тега. затем выполните $.scrollTop() из jquery.
$(window).scrollTop($('section#user_id').offset().top);