Как сделать простой autocomplete (jQuery & ajax)
Разберемся, как добавить в форму autocomplete с загрузкой данных с помощью ajax.
Для начала добавьте на страницу jQuery & jQuery ui.
Допустим, у вас есть input с классом autocomplete-field, к которому как раз хотите добавить автозаполнение:
<input type="text" class="autocomplete-field" name="test" value="" />Привяжем autocomplete к элементам, у которых есть класс autocomplete-field:
$('.autocomplete-field').autocomplete({
source: function( request, response ) {
$.ajax({
url: "example.php",
dataType: "json",
data: {
search: request.term
},
success: function( data ) {
response( data );
}
});
},
minLength: 3,//минимальное кол-во символов,которые надо напечатать для срабатывания autocomplete
});В данном коде example.php - это .php файл, который будет обрабатывать информацию и выдавать ответ.
search: request.term - это то, что пользователь ввел в input (понадобится для поиска по базе и отсеивания лишнего). При этом search можно заменить на любое другое слово - это будет параметр в вашем .php файле.
Упрощенный php файл для вывода результатов:
<?php
$res = [
[
'id' => 1,
'label' => 'Тест 1', // что будет отображаться в autocomplete
'value' => '1', //input value при выборе данного пункта
],
[
'id' => 2,
'label' => 'Тест 2',
'value' => '2',
],
[
'id' => 3,
'label' => 'Тест 3',
'value' => '3',
]
];
header("Content-type:application/json");
echo json_encode($res);
return $res;
?>Пример .php файла:
<?php
$searchTerm = $_REQUEST['search']; // введенный пользователем текст
$searchResults = ... // тут подсоединяетесь к базе и делаете выборку
$res = [];
if(count($searchResults) > 0){
foreach ($searchResults as $searchResult){
$res[] = [
//допустим у вас есть объект $searchResult, из которого вы и получаете данные:
'id' => $searchResult->getId(),
'label' => $searchResult->getLabel(),
'value' => $searchResult->getValue(),
];
}
}
header("Content-type:application/json");
echo json_encode($res);
return $res;
?>
Комментарии