Зарегистрироваться | Забыли пароль


Для начинающих

bottom

Уроки

bottom

Полезное

bottom

Файлы

bottom

Ссылки

bottom

Главная страница » Уроки по 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 · Просмотров: 712

Рекомендую
  • Currently 5.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 5.0/5 (всего 3 голоса)

Понравился сайт? Внесите свой вклад в его развитие?
R314489888859
41001346159934




   Комментарии к уроку (4)

12
Ubuntu    Добавлено: 09-09-2010 в 18:13
спасибо че))
 
34
12
Артём    Добавлено: 25-10-2010 в 09:39
Было бы неплохо если бы автор статьи объяснил js - программу
 
34
12
витя    Добавлено: 07-12-2010 в 20:00
если можно подробнее по sql
 
34
12
Евгений    Добавлено: 07-12-2010 в 20:52
В смысле как организовать подстановку из базы данных?
 
34
12

   Добавить комментарий


Ваше имя:


Текст комментария:

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


 
34