Автозаполнение формы с помощью jQuery

автозаполнение полей с помощью jQuery

Доброго времени суток. В данной статье я покажу Вам как реализовать автозаполнение формы с помощью jQuery.

На примере мы будем использовать список городов России. Пользователь начинает вводить название города, а скрипт подставляет название города, который он начал вводить.

Для начала подключаем в head  jQuery v1.7.2, далее непосредственно сам скрипт jquery.autocomplete.js и css (ссылка в конце статьи)

<link  rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

После того как подключили, необходимо ввести список городов(это короткий список)

<script>
$(document).ready(function(){
// --- Автозаполнение ---
$("#city_from,#city_to").autocompleteArray([
' Братиславская,ул., д.22',
'1-й Курьяновский проезд',
'Абакан',
'Азамар',
'Актау',
'Актобе',
'Алдан',
....
'Томск',
'Трехгорный',
'Туапсе',
'Тула',],
		{
			delay:10,
			minChars:1,
			matchSubset:1,
			autoFill:true,
			maxItemsToShow:10/
		}
);
// --- Автозаполнение ---
});
</script>

Как видно, сначала мы указываем id наших input (#city_from, #city_to), дальше идёт список городов, а потом уже параметры.

Непосредственно наша форма в html:

<table cellspacing="0" cellpadding="3" border="0" width="900">
<tbody>
<tr>
<td>Отправка груза:<span class="required">*</span></td>
<td>из <input type="text" name="city_from" id="city_from" value="" onkeydown="if(event.keyCode==13) return false;" autocomplete="off" class="ac_input"></td>
<td>в <input type="text" name="city_to" id="city_to" value="" onkeydown="if(event.keyCode==13) return false;" autocomplete="off" class="ac_input"></td>
</tr>
</tbody>
</table>

Кстати "onkeydown="if(event.keyCode==13) return false;" запрещает отправлять форму при нажатии клавиши Enter

Расшифровка параметров:

delay – задержка в миллисекундах. Если в течение этого времени пользователь не нажимал клавиши, активизируется запрос. Если используется локальный запрос (к данным, находящимся непосредственно в файле), задержку можно сильно уменьшить. Например до 40ms. (По умолчанию: 400).

minChars – минимальное число символов, которое пользователь должен напечатать перед тем, как будет активизирован запрос.

matchSubset  – использовать ли кэш для уточнения запросов. Использование этой опции может сильно снизить нагрузку на сервер и увеличить производительность. Не забудьте при этом еще и установить для cacheLength значение побольше.

autoFill – когда Вы начинаете вводить текст, в поле ввода будет подставлено (и выделено) первое подходящее значение из списка. Если Вы продолжаете вводить текст, в поле ввода и далее будет подставляться подходящее значение, но уже с учетом введенного Вами текста. (По умолчанию: false).

maxItemsToShow – ограничивает число результатов, которые будут показаны в выпадающем списке. Если набор данных содержит сотни элементов, может быть неудобно показывать весь список пользователю. Рекомендованное значение 10.

На этом всё. Думаю как подключить автозаполнение к форме с Formit, проблем не возникнет. Если у Вас остались вопросы, задавайте через форму ниже.

 

03.01.2016 / 12438

No avatar

Комментарии (14)

  1. Роман 19 февраля 2017, 13:01 # 0
    Добрый день, Игорь!
    Я задумал вот как поступить. Что бы не нагружать сервер, но при этом получать данные из MYSQL, я решил через PHP собрать все данные из базы в массив и передать его через JSON в JS. Сделал я это вот как:
    <? $array_js = json_encode($array_php); ?> Где $array_php — это и есть массив, собранный в PHP.

    Далее в JS я принимаю значение массива вот так:
    var obj=<? echo $array_js ?>;

    Затем принимаю этот массив уже в нашей функции
    $("#search").autocompleteArray([obj],
    Но почему при заполнении выдает только первое значение массива, остальных не видит?!
    Полагаю я напортачил с переменными. Может быть поможете с решением?
    Спасибо!
    1. Игорь 19 февраля 2017, 13:11 # 0
      Добрый день, Роман.
      Скорее всего у Вас не верный массив в $array_php
      P.S. Код оформляйте в тэг
      <code></code>
      1. Роман 19 февраля 2017, 13:17(Комментарий был изменён) # 0
        Спасибо большое за скорый ответ и за подсказку с тегами.
        Вот так выглядит код сборки данных в PHP:
        $query_string = "SELECT id, surname, name, patronymic FROM thetahealing_customer_cards";
        $db_result = mysql_query($query_string) or die(mysql_error());
        $n=0;
        $array_php = "";
        while ($array = mysql_fetch_array($db_result))
        {
        echo "id: ".$array['id']." [ ".$array['surname']." ".$array['name']." ".$array['patronymic']." ]<br />";
        $array_php[$n] = $array['surname']." ".$array['name']." ".$array['patronymic'];
        $n++;	
        }
        $array_js = json_encode($array_php);
        ?>
        
        Я уже задумался. Как я понял, JSON передает данные в виде объекта. А функция работает с массивом. Может быть в этом причина? Или я все же не верно организовал массив в PHP?

        Еще интересное заметил.
        Если вывести полученный массив в JS через Алерт, вот так:
        var obj = <? echo $array_js ?>;
        	alert(obj);
        
        Ты будет виден весь массив, а не только его первое значение.
        1. Роман 19 февраля 2017, 13:34 # 0
          Я смог решить задачу. Убрать квадратные скобки у переменной obj в строке:
          $("#search").autocompleteArray(obj,
          
          В любом случае спасибо за статью и за помощь!
          1. Игорь 19 февраля 2017, 14:27 # 0
            Да, не за что)
            Гуд, что разобрались
            1. Роман 19 февраля 2017, 15:47(Комментарий был изменён) # 0
              Игорь, а скажите, как добавить второе поле с теми же данными для автозаполнения? Скажем есть еще одно поле Input с id=«search2» как его добавить в функцию? Или нужно писать еще одну функцию?

              Ох как я не внимателен :)
              1. Игорь 19 февраля 2017, 16:39 # 0
                Через запятую:)
                $("#search, #search2").autocompleteArray([])
                1. Роман 19 февраля 2017, 20:13 # 0
                  Игорь, я прошу прощения, что много задаю вопросов. Но столкнулся с тем, что поле input не передает значение, полученное посла автозаполнения. Переменная пуста. Почему?
                  1. Игорь 19 февраля 2017, 20:24 # 0
                    Такого быть не должно. Значит не правильно ловите в PHP.
                    После заполнения в консоле введите
                    $('#search').val()
                    Если выведет, то проблема в PHP, или куда вы запрос отправляете.
                    1. Роман 19 февраля 2017, 20:55 # 0
                      Я взял за основу Ваш файл, где форма ввода не изменялась.
                      Кроме того, что я добавил кнопку, по нажатию которой должно выводиться введенное в инпут значение.
                      <button type="button" id="DisplayName">Отправить</button>
                      
                      Вот так выглядит скрипт, выводящий на экран информацию, введенную в поле input:
                      $(document).ready(function() {
                      	$("#DisplayName").click(function(){
                      		var sity = $('#city_from').val();
                      		document.getElementById('info').innerHTML="Информация: ".sity;
                      	})
                      })
                      
                      Результат выводится в блок с id=«info»
                      Само собой получается undefined
                      Хотя в консоле выводит верно. Значит я не верно вывожу информацию. Я хотел без перезагрузки страницы передавать в php данные через Ajax, а далее обработка полученных данных. В результате привязал функцию JS к кнопке в форме.
                      1. Роман 19 февраля 2017, 21:00 # 0
                        Судя по всему я уже устал, я поставил точку вместо плюса, по принципу PHP :)))
                        Все сработало :)
                        1. Игорь 19 февраля 2017, 21:03 # 0
                          Да, ещё можно заменить
                          document.getElementById('info').innerHTML="Информация: ".sity;
                          на
                          $('#info').html("Информация: "sity);
                          Раз вы используете jquery
                        2. Денис 18 февраля 2016, 23:11 # 0
                          Расскажите для тупых с сайтом WP. Куда что вставляем. jquery в корень? Список городов в подвал? Или куда? Я как jquery.js в корень ставлю у меня шапка сайта пропадает.
                          1. Игорь 19 февраля 2016, 00:00 # 0
                            Для начала в head подключаем jQuery библиотеку, возможно у Вас она уже подключена, если подключена, то соответственно не подключаем. Далее тоже в head подключаем css и сам скрипт jquery.autocomplete.js
                            То есть:
                            <link  rel="stylesheet" type="text/css" href="style.css" />
                            <script src="jquery.js"></script>
                            <script type="text/javascript" src="jquery.autocomplete.js"></script>
                            Вывод списка городов можно вынести в js файл, либо подключить после тега body
                            P.S. Заливать можно куда угодно, только укажите правильный путь.