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

33

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

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

Почнемо з отримання бази даних, з якої ми і будемо здійснювати пошук. Щоб не створювати БД, я скористаюся вже готової, це буде БД world, яку ви можете завантажити з офіційного сайту MySQL або просто взяти з исходников. У цій базі ви знайдете три таблиці: країни, міста і мови. У роботі нам знадобиться таблиця міст, наприклад.

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

Ну і, звичайно ж, нам потрібно пошукова форма.

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

Визначимо тестовий масив з будь-якими даними, нехай це буде список мов програмування:

var langs = [«ActionScript», «AppleScript», «Asp», «BASIC», «C», «C++», «Clojure», «COBOL», «ColdFusion», «Erlang», «Fortran», «Groovy», «Haskell», «Java», «JavaScript», «Lisp», «Java», «PHP», «Python», «Ruby», «Scala», «Scheme»];

Тепер викличемо метод autocomplete для пошукового поля і передамо йому в якості джерела даних оголошений вище масив:

$(function(){
var langs = [«ActionScript», «AppleScript», «Asp», «BASIC», «C», «C++», «Clojure», «COBOL», «ColdFusion», «Erlang», «Fortran», «Groovy», «Haskell», «Java», «JavaScript», «Lisp», «Java», «PHP», «Python», «Ruby», «Scala», «Scheme»];
$(«#search»).autocomplete({
source: langs
});
});

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

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

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