Delpix
@Delpix
Дизайнер и немного блогер

Как сверстать навигационный блок?

Нужно помощь с версткой навигационнного блока (навигация по странице).
Сейчас он выглядит так:
<div id="link">
<ol>
<li><a href="#Linkin_Park">Linkin Park</a></li>
<li><a href="#Lumen">Lumen</a></li>
<li><a href="#Nirvana">Nirvana</a></li>
<li><a href="#Slipknot">Slipknot</a></li>
<li><a href="#Stigmata">Stigmata</a></li>
</ol>
</div>

Я бы хотел чтобы по этому блоку осуществлялся мгновенный поиск (как в Вконтакте — вводишь букву и сразу результаты) и чтоб ссылки были по алфавиту.
Возможно ли это реализовать? Куда копать?
Что то вроде:
b93d12c19ee3e64cbd9939bf1023c3aa.png
  • Вопрос задан
  • 2947 просмотров
Пригласить эксперта
Ответы на вопрос 6
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
jsfiddle.net/iiil/5Y9A4/14
Вот пример. Список формирую из 1000 строк, поиск моментальный (введите скажем "125"), а я сомневаюсь, что написанный код поиска идеален. Формируйте список на уровне back-end и ищите на jquery. Оформление не должно вызвать больших проблем.
Ссылки по алфавиту опять таки делайте на уровне back-end, в результате будет в том же порядке.
Ответ написан
Комментировать
shiza36
@shiza36
В JS копать, в ajax в частности, верстка тут не при чем.
Ответ написан
kirillplatonov
@kirillplatonov
Ruby on Rails developer
Алгоритм такой:
1. Пользователь вводит что-то в строку поиска
2. Вы фиксируете это действие одним из событий, api.jquery.com/keypress/, например
3. Берете текст из строки и отправляете ajax запрос с ним серверу
4. На сервере подготавливаете данные на основе запроса и возвращаете их в JSON (нужно будет распарсить на стороне клиента) или в виде готового HTML
5. На стороне клиента вставляете результат в нужное место на странице

В принципе это стандартный алгоритм работы с ajax. В вашем случае можно добавить сюда еще разбиение результатов на страницы (т.е. подгружать не сразу все результаты, а первые 30, например, остальные по мере скроллинга или других действий пользователя).
Ответ написан
@frees2
Пять лет назад, точнее шесть, зафигачил себе поиск такой, но сейчас можно гораздо современнее.
Копию можете взять из кода. Только там поиск по удаленному файлу
поиск
Ответ написан
@bye
Это очень легко сделать с помощью AngularJS. Посмотрите как это реализовано в этом примере docs.angularjs.org/api/ng/filter/filter
Ответ написан
Комментировать
@artishok
кратко
jsfiddle.net/artishok/5Vjze по такому принципу делай
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы