Делаем автозаполнение на JavaScript
С сегодняшнего дня мы начинаем собирать собственную коллекцию полезных плагинов на jQuery и Mootools. Где-то раз в неделю мы будем делать подробное описание какого-нибудь плагина, решающего насущные задачи рядового верстальщика.
Зачем, просите вы. Ведь есть же Гугл, нужный плагин найти не проблема. Да, Гугл это вещь, но проблема-то в другом — сейчас плагинов развелось столько, что в них черт ногу сломит. Плагинов море, но какие из них хорошие, удобные, быстрокастомизируемые — никто не знает. Поэтому мы и решили делать свою подборку плагинов «проверено на временно» ;-)
Мы посовещались и я решил начать нашу подборку плагинов с плагина автозаполения полей. В статье мы рассмотрим плагины как под Mootools, так и под jQuery (который я немного доработал).
Предистория
Пару месяцев назад для одного проекта я делал автозаполнение на Mootools. Тут все оказалось проще, чем я думал. Плагинов хоть было и мало, но я нашел то, что искал — плагин от Гаральда Киршнера, автора потрясающих плагинов под Mootools.
Буквально на днях задача повторилась, но теперь нужна была версия под jQuery. «Да как два пальца о кнехт» сказал я и открыл Гугл. Через час выяснилось, что да, плагины есть, много, разные, красивые, но — все не те. Кришнеровского удобства в них не было.
jQuery версия
Как я уже сказал, подходящих мне плагинов на jQuery не было, но был более-менее похожий — модификация плагина «jQuery Autocomplete» от ПенгоВоркс. Что меня в нем не устраивало? Посмотрим на две картинки: левая — поле поиска в Сафари, правая — работа плагина до моего вмешательства.
Суть в том, что когда вы набираете строку для поиска, под ней появляются варианты. Если нажать стрелку вниз, то в Сафари строка в поле будет дополняться автоматически, и добавленная часть сразу же выделяется. Если подвигать стрелку, то будет меняться только подставляемая часть. В плагине же ничего не менялось. Это было неудобно.
Итак, посмотрим на код. Привязываем плагин:
<input name="autocomlete" type="text" id="autocomplete" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#autocomplete').autocomplete('backend1.php', {
delay: 10,
minChars: 1,
matchSubset: 1,
autoFill: true,
maxItemsToShow: 10
});
});
</script>Отлично, файл backend1.php в ответ на GET запрос возвращает нам простой текст, где каждое слово должно быть на новой строке:
<?php
/* Подключаетесь к базе и
/* выбираете из нужной таблицы
/* нужный столбец */
$res = mysql_query($sql);
while ($street = mysql_fetch_array($res)) {
echo $street['name'].'rn'; // Выводите как простой текст
}
?>Просто, не так ли? Возможные парамерты скрипта вы можете посмотреть в документации. Но я думаю, для обычной работы вам они не потребуются.
Mootools версия
Как я уже сказал, этот плагин написал Гаральд Кершнер. Скрипт может получать данные как из текущего документа (они ему передаются как параметры), так и запрашивать из с помощью AJAX (HTML или JSON). Я рассмотрю пример с HTML, так он мне ближе и понятнее.
Привязываем скрипт к полю:
<input name="autocomlete" type="text" id="autocomplete" />
<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript" src="mootools/Observer.js"></script>
<script type="text/javascript" src="mootools/Autocompleter.js"></script>
<script type="text/javascript" src="mootools/Autocompleter.Request.js"></script>
<script type="text/javascript">
document.addEvent('domready', function() {
var inputWord = $('autocomplete');
new Autocompleter.Request.HTML(inputWord, 'backend.php');
});
</script>На сервере отдаем данные, соответствующие POST запросу:
<?php
/* Подключаетесь к базе и
/* выбираете из нужной таблицы
/* нужный столбец */
$res = mysql_query($sql);
while ($street = mysql_fetch_array($res)) {
echo '<li>'.$street['name'].'</li>'; // Выводите как элементы списка
}
?>Надеюсь, что в поисках плагина для автозаполнения вы теперь не будете тратить несколько часов — вы просто зайдете на Временно.нет, перечитаете статью и быстренько сделаете все как надо. Удачи!
Рекомендуем почитать
