Наверняка вы видели формы, где при вводе слов автоматически подставляются наиболее схожие результаты. Часто это можно увидеть в формах ввода адреса или поиска товаров. Сделаем тоже самое на js.
Для создания скрипта автозаполнения нам понадобится подключить библиотеку jQuery и UI (в моем примере она уже немного устарела, поэтому можете обновить).
Итак, чтобы сделать автозаполнение input поля пропишите код:
<input id=”tags1″>
<script>
$(function() {
var availableTags = [“php Script”, “Супер Script JS”, “asp Script”, “Java” ]; //
$(“#tags1”).autocomplete({ //на какой input:text назначить результаты списка
source: availableTags
});
});
</script>
Теперь если вы будете вводить “scr” (слово script), то появятся первые 3 результата. При клике на один из них, подставится его текстовое значение в value input-а. Заметьте, что поиск идет сразу по всему полю.
Как вы уже догадались:
availableTags – массив результатов поиска для подстановки
source – источник для поиска (сюда и подставляем массив)
Чтобы ограничить минимальное число символов, чтобы поиск начал работать поставьте параметр: minLength: 3
Также для работы вам могут пригодиться следующие события:
open: function(event, ui) {} //действие в момент поиска (когда набирается текст)
select: function(event, ui) {} //действие когда элемент выбран и его название вписывается в input
close: function(event, ui) {} //действие когда поиск закрывается (ul список результатов)
ui.item.value – результат выбранного пользователем поиска
Поиск с автозаполнением прямо из БД
Чтобы организовать поиск по БД, в source вы можете поставить php файл, в котором берутся данные (в запрос можно добавлять GET), например: source: ‘poisk.php?adres=1’
Содержание файла poisk.php может быть следующим:
<?php header(‘Content-Type: text/html; charset=utf-8’);
include(‘bd.php’); //подключаемся к БД
$count = 0;
if($_GET[‘adres’] == ‘1’) {
$fetch = mysql_query(“SELECT * FROM shopadres WHERE name LIKE ‘” . strval($_GET[‘term’]) . “%’ and address = ‘1’ ORDER BY name LIMIT 20”);
while ($row = mysql_fetch_array($fetch)) {
$return_arr[] = $row[‘name’].’span’.$row[‘address’].’span’; $count++; }
if ($count == 0) $return_arr[0] = ‘По данному запросу ничего не найдено!’;
echo json_encode($return_arr); //возвращает результаты поиска скрипту
}
?>
Как вы видите здесь введен лимит на вывод найденных значений до 20. Строка поиска передается в $_GET[‘term’], а вывод результата идет в JSON формате. Только поставьте защиту для безопасного ввода/вывода из БД.
(Пока оценок нет)
Загрузка...