На главную Статьи Функции

Подсказки ввода на AJAX.




В этой статье я расскажу о том, как сделать подсказку ввода. Другими словами – предложить пользователю сайта возможные варианты для ввода в текстовое поле, например поле поиска по сайту.
Первый раз я делал подсказку ввода для интернет магазина и это было не просьбой заказчика, а скорее моей инициативой. Тогда мне было интересно применить только что полученные знания, и попробовать на практике пример из книги, которую я тогда читал. Суть коротко сводится к тому, что когда пользователь вводит в текстовое поле некоторый набор символов, нам необходимо передать этот набор backend файлу, который будет проводить поиск по базе данных на предмет совпадений и возвращать результат. Еще один пример где может пригодится автоподсказка – поле ввода адреса. Например у вас есть база данных, в которой есть названия улиц вашего города. Посетителю сайта предлагается ввести название улицы, и пока пользователь набирает, ему предлагаются варианты из базы данных.
Переходим к реализации. Для простоты, можно взять пример из статей про корзину на AJAX, там есть все, что нам понадобится. Первое, что нам нужно – обработчик события onkeyup. Это событие происходит, когда пользователь отпускает нажатую кнопку на клавиатуре. По этому событию будет происходить вызов javascript функции, которая будет обращаться к backend файлу и т.д.
Сначала создадим поле ввода, поскольку это проще всего:

<div id="search">
<p>поиск: <input type="text" id="search_field"  onkeyup="search(this.value)" /></p>
<div id="search_result"></div>
</div>
Здесь я еще добавил некоторую верстку, чтобы не выглядело совсем плохо. Событие onkeyup будет происходить в id="search_field". В слое search_result будут выводится подсказки. Поле для поиска готово. Следующим шагом будет написание функции javascript, которая будет принимать значение текстового поля:
function search(word) {
//если поле поиска не пустое, производим AJAX запрос к файлу search.php
//и выводим результат в слой search_result
if ($('#search_field ').val()!='') {
$.post( "backend/search.php", {word: word}, onSuccess);
function onSuccess(data)
{
$('#search_result').html(data);
}
}
//если поле поиска пустое, очищаем слой с результатами поиска
else {
$('#search_result').html('');
}             
}
Вот, тут я думаю нет особых сложностей в понимании того что происходит, в статьях о том как создать корзину, я рассказывал о методе jQuery html(), который добавляет в указанный элемент html-текст.
Теперь перейдем непосредственно к backend файлу search.php:
<?php
include_once $_SERVER['DOCUMENT_ROOT'].'/cart/db.class.php';
$db=new DB;
$q="SELECT * FROM products WHERE name LIKE '".iconv('UTF-8', 'cp1251', $_POST['word'])."%'";
$result=$db->fetch_all($db->query($q));
if (!empty($result)) {
foreach ($result as $product) {
echo '<p onclick="$(\'#search_field\').val($(this).html())">'.$product['name'].'</p>';
}
}
Как вlt;?php echo $key?quot;идите в начале подключаем базу данных. Обратите внимание на то, что в SQL-запросе есть несколько моментов на которые стоит обратить внимание. Во-первых, оператор LIKE, который я описывал в этой статье. Во-вторых – преобразование кодировки переменной запроса из кодировки UTF-8 в кодировку windows-1251. Это сделано для того, чтобы передать запросу русский символ, а не «кракозябру». Итак, запрос извлекает из базы данных товары, название которых начинается на $_POST['word']. Обратите внимание на знак процент (%) после переменной. Он означает, что после переданной строки может быть любое количество любых символов. Дальше проверяем, если результат запроса пустой, то ничего не выводим (на всякий случай, чтобы не было выведено предупреждения Warning: Invalid argument supplied for foreach() in X:\home\examples\www\cart\backend\search.php on line 7 вместо результатов поиска). И в конце концов, выводим список результатов в виде параграфов, содержащих событие onclick, которое предает html-код, содержащийся внутри этого параграфа в текстовое поле.
Ну вот, на этом в принципе можно закончить. Можете поэкспериментировать, попробовать разные варианты, вообще вещь довольно простая и интересная.



© 2010-2019 При использовании материалов ссылка на сайт www.webchaynik.ru обязательна

обратная связь