От автора: приветствую вас друзья. В этой статье мы с вами начнем реализацию живого поиска для сайта. Что такое живой поиск? Вы с ним сталкиваетесь постоянно, когда что-то ищете в Гугле или Яндексе. Как только вы начинаете набирать поисковый запрос, поисковик тут же начинает предлагать вам варианты, из которых вам остается лишь выбрать наиболее подходящий. Удобная штука, не так ли? Попробуем и мы реализовать нечто подобное.
Исходные файлы текущей статьи вы можете скачать по ссылке.
Начнем с получения базы данных, по которой мы и будем осуществлять поиск. Чтобы не создавать БД, я воспользуюсь уже готовой, это будет БД world, которую вы можете скачать с официального сайта MySQL или просто взять из исходников. В этой базе вы найдете три таблицы: страны, города и языки. В работе нам пригодится таблица городов, к примеру.
Далее нам потребуется виджет Autocomplete библиотеки jQuery UI. Скачаем и подключим его. Я воспользуюсь исходниками из урока jQuery UI календарь, в котором мы уже подключали эту библиотеку.
Ну и, конечно же, нам потребуется поисковая форма.
В этой статье мы попробуем реализовать поиск по массиву значений, который заранее предопределен в коде, ну а уже в продолжении статьи, в следующей части, реализуем поиск по реальной БД.
Определим тестовый массив с любыми данными, пусть это будет список языков программирования:
|
1 |
var langs = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; |
Теперь вызовем метод autocomplete для поискового поля и передадим ему в качестве источника данных объявленный выше массив:
|
1 2 3 4 5 6 7 8 9 |
$(function(){ var langs = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; $("#search").autocomplete({ source: langs }); }); |
Протестируем работу виджета Autocomlete. Для этого я введу первую букву латинского алфавита — a:
В результате мы получаем выпадающий список, в котором представлены варианты языков программирования, в названии которых встречается литера a. Если мы продолжим ввод — список будет изменяться:
Теперь нам предложены варианты, в которых встречается последовательность двух букв — as. Это действительно удобно для пользователя. На этом мы завершим текущую статью. В следующей статье мы уже будем работать с реальными данными, которые хранятся в БД. К слову, в курсе Каталог товаров более подробно показан процесс реализации живого поиска на сайте. Удачи!
