В этой статье я расскажу о том, как сделать подсказку ввода. Другими словами – предложить пользователю сайта возможные варианты для ввода в текстовое поле, например поле поиска по сайту.
Первый раз я делал подсказку ввода для интернет магазина и это было не просьбой заказчика, а скорее моей инициативой. Тогда мне было интересно применить только что полученные знания, и попробовать на практике пример из книги, которую я тогда читал. Суть коротко сводится к тому, что когда пользователь вводит в текстовое поле некоторый набор символов, нам необходимо передать этот набор 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>
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>';
}
}
Ну вот, на этом в принципе можно закончить. Можете поэкспериментировать, попробовать разные варианты, вообще вещь довольно простая и интересная.
