Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JavaScript / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Автозаполнение поля

В этом уроке мы поговорим о такой интересной и удобной функции как автозаполнение поля формы. Эта функция стала очень популярна в последнее время, и Вы не раз сталкивались с ней, например, в поисковых системах типа Яндекса или Google. Как только вы начинаете набирать поисковый запрос, скрипт начинает выводить популярные фразы и выражения, которые совпадают с вводимыми символами. Чтобы все стало понятнее, посмотрите пример работы скрипта.

Пример

Для начала мы создадим форму, в которой будет содержатся поле и кнопка. Всем элементам мы присвоим идентификаторы которые необходимы для корректной работы:

<form id="searchform" action="" method="post">
<p><input type="text" id="searchfield" name="searchfield" value="">
<button type="submit" id="searcbutton">Поиск</button></p>
</form>

Теперь нам нужно подключить сам скрипт, который и будет выводить в списке похожие фразы.

<script type="text/javascript" src="searchfield/searchfield.js"></script>

Подключив данный скрипт, форма уже начнет функционировать и предлагать автозаполнение, но вид у выпадающего списка согласитесь не очень, поэтому надо немного поработать над стилями. Для этого мы подключим файл со стилями и немного изменим его:

<link href="searchfield/searchfield.css" rel="stylesheet" type="text/css" media="screen">

Немного поэкспериментировав я изменил цвет, шрифты ну и некоторые другие параметры. Отредактированный файл стиля находится в исходных файлах, в котором я добавил комментарии, которые помогут отредактировать его под свой дизайн.

Теперь немного поговори о тех вариантах подстановки, как их изменить и где они все хранятся. Находятся они в том самом ява-скрипте, который мы подключили. Откроем его и посмотрим как он устроен. Там прописан идентификатор, который мы присвоили полю, надпись, которая отображается в поле до клика на нем мышкой, и тот массив, в котором содержатся все наши варианты, перечисленные через запятую. Изменяйте их на свои и пользуйтесь. Если же вы хотите выводить искомые фразы из баз данных, например, то содержимое javascript файла можно вставить прямо в страницу и генерировать нужные фразы при помощи php.

Автор: Евгений Бочкарев Урок добавлен: 29 Января 2010 в 00:25 Просмотров: 17291

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (7)

#8 Евгений 17-02-2011 в 20:52
Для этого нужно содержимое файла searchfield.js поместить прямо на странице и в переменную suggestionText с помощью php в цикле вывести нужные значения.
Измененные исходники
#9 Дмитрий 19-02-2011 в 09:56
Спасибо большое! После недолгого разбирательства с помощью цикла do.. while всё получилось!!!
#10 Виталий 27-02-2011 в 21:24
Внедрил в свой поиск на сайте http://mp3disc.info
#11 Дмитрий 05-05-2011 в 00:42
Ни с javascript, ни с ajax'ом особо не дружу. Решение предложенное Вами очень понравилось, т.к. долго искал что-то подобное, особенно вариант с использованием БД. Возник вопрос: можно ли использовать данную реализацию не для одного inputa, а сразу для нескольких на одной форме, чтобы автозаполнение, происходило в нескольких input'ах соответсвенно из разных таблиц(не связанных между собой)?
#12 Евгений 05-05-2011 в 21:30
На самом деле ajax тут вообще нет, а просто JavaScript. А так не знаю точно, не пробовал. По идее сделать можно, но думаю такую задачу лучше сделать с помощью других подобных скриптов, которые действительно используют ajax.
#13 Денис 13-10-2011 в 14:31
А как можно сделать, занесение в value'' id найденого слова ?
#14 Евгений 14-10-2011 в 14:21
Если я правильно понимаю то этот id храниться в базе данных?
#15 Елена 07-02-2012 в 17:19
в сафари и опере не работает
#16 Алексей 02-04-2012 в 00:22
здравствуйте, скажите а как ограничить вывод например 10 строчками или как сделать скролинг?
#17 Иван 21-04-2016 в 03:10
А как сделать, чтобы в нескольких полях работало автозаполнение? У меня форма Страна, Город, Область и т.д. И если несколько вставить, то работает только в последней... Что я только не менял... вернее много чего... но не помогло... Подскажите пожалуйста
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки