<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Живой поиск на сайте
29.03.2013 11:55:06 Живой поиск на сайте Сообщение #1
olga

olga

Новичок

Новичок

Дата регистрации:
29.03.2013 11:23:57

Сообщений: 5

Михаил пожалуйста помогите с кодом.
Хочу такой результат: http://www.jelu.ru/upload/tutorial/suggest/script.html
С помощью AJAX подгружаются данные из БД,если они совпадают с данными,кот ввел пользователь в поле формы для поиска. С этим проблем нет.
Никак не получается выбрать нужный вариант с помощью стрелок "вверх","вниз".

<div class="search_area">
<form action="ajax.php" method="POST">
<input type="text" name="search" id="search" value="" autocomplete="off">
<input type="submit" value="Поиск">

</form>
<div class="rew"></div> // сюда подгружаются данные поиска.
</div>

$("#search".keydown(function(event){
switch(event.keyCode) {

// делаем переход по подсказке стрелочками клавиатуры
case 38: // стрелка вверх
case 40: // стрелка вниз

}
break;
}
});
Этот код не могу до работоспособности довести. Данные подгружаются сюда <div class="rew"></div>, значит выбирать вариант поиска надо
$(".rew"? Наведите на мысль.
Профиль Ответить
29.03.2013 12:37:49 Живой поиск на сайте Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Где case, надо выделять выбранный элемент (например, ставить синий фон), возможно, так же надо будет в текстовое поле добавить значение выбранного элемента. Также потребуется хранение в глобальной переменной текущего выбранного элемента. Двигайтесь постепенно и для начала добейтесь вообще реакции на нажатие стрелок, вызвав alert() в соответствующем case.
Профиль Ответить
29.03.2013 14:05:22 Живой поиск на сайте Сообщение #3
olga

olga

Новичок

Новичок

Дата регистрации:
29.03.2013 11:23:57

Сообщений: 5

С alert это одно:

<script type="text/javascript">
$(document).ready(function(){
$("#search".keydown(function(event){
switch(event.keyCode){
case 38:
alert(" Нажата клавиша 38";
break;
case 40:
alert(" Нажата клавиша 40";
break;
}

})

});
</script>
А вот как перемещаться с помощью стрелки это другое! Я не могу ее заставить двигаться.
Так?
<script type="text/javascript">
$(document).ready(function(){
$("#search".keydown(function(event){
switch(event.keyCode){
case 38:
$('.rew').addClass('active');
break;
case 40:
$('.rew').addClass('active');
break;
}

})

});
</script>
Пожалуйста помогите заставить код работать,я только учусь.
Профиль Ответить
29.03.2013 14:11:50 Живой поиск на сайте Сообщение #4
olga

olga

Новичок

Новичок

Дата регистрации:
29.03.2013 11:23:57

Сообщений: 5

Куда подгружаются данные из БД это должно быть текстовое поле или не обязательно?
Профиль Ответить
29.03.2013 15:04:28 Живой поиск на сайте Сообщение #5
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Данные из базы у Вас загружаются в отдельный блок. Задача очень сложная, раз только учитесь. Нужно вывести элементы в блок все результаты в определённом формате, далее эти же данные надо перебирать при каждом нажатии на стрелку, воспользовавшись DOM или JQuery. Найдя active, удалить его и поставить у следующего такого же элемента или у предыдущего, в зависимости от того, на какую стрелку нажали.
Профиль Ответить
29.03.2013 19:01:49 Живой поиск на сайте Сообщение #6
olga

olga

Новичок

Новичок

Дата регистрации:
29.03.2013 11:23:57

Сообщений: 5

Спасибо,буду пробовать!
Профиль Ответить
30.03.2013 12:42:20 Живой поиск на сайте Сообщение #7
olga

olga

Новичок

Новичок

Дата регистрации:
29.03.2013 11:23:57

Сообщений: 5

Подскажите пожалуйста, в каком формате надо вывести результаты в блок из БД?
Профиль Ответить
30.03.2013 15:06:03 Живой поиск на сайте Сообщение #8
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

В любом, но чтобы он был постоянный, например так:
<p>Вариант 1</p>
<p>Вариант 2</p>
<p>Вариант 3</p>
Профиль Ответить