Миттєвий пошук для сайту. Частина 2

62

Від автора: вітаю вас друзі. У цій статті ми з вами продовжимо реалізацію миттєвого пошуку сайту. Що таке живий пошук? Ви з ним зустрічаєтеся постійно, коли щось шукаєте в Гуглі або Яндексі. Як тільки ви починаєте набирати пошуковий запит пошуковик тут же починає пропонувати вам варіанти, з яких вам залишається лише вибрати найбільш підходящий. Зручна штука, чи не так? Спробуємо і ми реалізувати щось подібне.

Вихідні файли поточної статті ви можете завантажити за посиланням. Першу частину статті ви можете знайти за посиланням.

Отже, у першій частині ми підготували базу даних, яка буде використана для живого пошуку, а також прикрутили віджет Autocomplete бібліотеки jQuery UI до поля пошуку на нашій сторінці. Поки що віджет працює з тестовими даними, але зараз ми з вами це виправимо.

Перш за все вкажемо для віджета інше джерело даних, це буде, скажімо, файл search.php, який нам необхідно також створити.

$(function(){
$(«#search»).autocomplete({
source: ‘search.php’,
});
});

У файлі search.php я напишу найпростіший код, що виводить привітання:

echo » Привіт, світ!’;

Тепер наберу будь-який символ в полі пошуку і подивлюся, що відбувається при цьому в консолі браузера.

Як бачимо, відправляється GET запит з параметром term, значенням якого є безперервна, набрана в полі пошуку. При цьому все відбувається асинхронно, без перезавантаження сторінки, тобто використовується AJAX.

Чудово, тепер залишається лише прийняти надійшов пошуковий запит і видати відповідь на нього. Для цього потрібно організувати підключення до сервера БД і написати нескладний код, який отримує дані з БД за запитом. Код файл search.php буде приблизно таким:

$db = mysqli_connect(«localhost», «root», «», «world») or die(«Немає з’єднання з БД»);
mysqli_set_charset($db, «utf8») or die(«Не встановлена кодування з’єднання»);
/**
* пошук автокомплит
**/
function search_autocomplete(){
global $db;
$search = trim(mysqli_real_escape_string($db, $_GET[‘term’]));
$query = «SELECT Name FROM city WHERE Name LIKE ‘%{$search}%’ LIMIT 10»;
$res = mysqli_query($db, $query);
$result_search = array();
while($row = mysqli_fetch_assoc($res)){
$result_search[] = array(‘label’ => $row[‘Name’]);
}
return $result_search;
}
if(!empty($_GET[‘term’])){
$search = search_autocomplete();
exit( json_encode($search) );
}

Зверніть увагу, функція search_autocomplete, яка і отримує дані за запитом, має повертати ці дані в певному форматі, це повинен бути масив з ключами label і значеннями знайдених міст. Після виклику функції необхідно перетворити в формат JSON.

Залишається перевірити роботу нашого живого пошуку. Для цього, як і минулого разу, наберемо всього одну букву — a:

Відмінно! У відповідь ми отримали десяток міст, в назві яких зустрічається введена літера. Якщо ми продовжуємо набирати назва, список варіантів буде змінюватися, тобто з кожною буквою буде відправлятися новий запит AJAX.

Ось, власне, і все, живий пошук працює. Що ще можна зробити? По-перше, я б обмежив відправляються ajax запити, щоб знизити навантаження на сервер. Зараз запити надсилаються, починаючи з першої введеної літери. Я б починав, скажімо, з третьої букви. Це можна зробити за допомогою опції minLength. Також при виборі варіанту необхідно відправляти запит на сервер, який витягне всю інформацію по обраному варіанту. Це допоможе зробити опція select:

$(function(){
$(«#search»).autocomplete({
source: ‘search.php’,
minLength: 3,
select: function( event, ui ){
window.location = ‘search.php?search=’ + encodeURIComponent(ui.item.value);
}
});
});

Тепер при виборі варіанту ми вирушимо на сторінку search.php з GET параметром search і обраним містом. Залишається лише прийняти цей запит і видати всю необхідну за нього інформацію… але це вже тема окремої статті.

На цьому стаття завершується. До речі, в курсі Каталог товарів більш детально показаний процес реалізації живого пошуку на сайті. Удачі!