От автора: приветствую вас друзья. В этой статье мы с вами продолжим реализацию живого поиска для сайта. Что такое живой поиск? Вы с ним сталкиваетесь постоянно, когда что-то ищете в Гугле или Яндексе. Как только вы начинаете набирать поисковый запрос, поисковик тут же начинает предлагать вам варианты, из которых вам остается лишь выбрать наиболее подходящий. Удобная штука, не так ли? Попробуем и мы реализовать нечто подобное.

Исходные файлы текущей статьи вы можете скачать по . Первую часть статьи вы можете найти по .

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

Прежде всего укажем для виджета другой источник данных, это будет, скажем, файл search.php, который нам необходимо также создать.

$(function(){ $("#search").autocomplete({ source: "search.php", }); });

Теперь наберу любой символ в поле поиска и посмотрю, что происходит при этом в консоли браузера.

Как видим, отправляется 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.

Updated on April 30, 2016

I"m going to show you how to create simple search using PHP and MySQL. You"ll learn:

• How to use GET and POST methods
• Connect to database
• Communicate with database
• Find matching database entries with given word or phrase
• Display results

You should have Apache, MySQL and PHP installed and running of course (you can use for different platforms or WAMP for windows, MAMP for mac) or a web server/hosting that supports PHP and MySQL databases.

Let"s create database, table and fill it with some entries we can use for search:

• Go to phpMyAdmin, if you have server on your computer you can access it at http://localhost/phpmyadmin/
• Create database, I called mine tutorial_search
• Create table I used 3 fields, I called mine articles.
• Configuration for 1st field. Name: id, type: INT, check AUTO_INCREMENT, index: primary

INT means it"s integer
AUTO_INCREMENT means that new entries will have other(higher) number than previous
Index: primary means that it"s unique key used to identify row

• 2nd field: Name: title, type: VARCHAR, length: 225

VARCHAR means it string of text, maximum 225 characters(it is required to specify maximum length), use it for titles, names, addresses
length means it can"t be longer than 225 characters(you can set it to lower number if you want)

• 3rd field: Name: text, type: TEXT

TEXT means it"s long string, it"s not necessary to specify length, use it for long text.

• Fill the table with some random articles(you can find them on news websites, for example: CNN, BBC, etc.). Click insert on the top menu and copy text to a specific fields. Leave "id" field empty. Insert at least three.

It should look something like this:

• Create a folder in your server directory and two files: index.php and search.php (actually we can do all this just with one file, but let"s use two, it will be easier)
• Fill them with default html markup, doctype, head, etc.

Search

• Create a form with search field and submit button in index.php, you can use GET or POST method, set action to search.php. I used "query" as name for text field

GET - means your information will be stored in url (http://localhost/tutorial_search/search.php?query=yourQuery )
POST - means your information won"t be displayed it is used for passwords, private information, much more secure than GET

Ok, let"s get started with php.

• Open search.php
• Start php ()
• Connect to a database(read comments in following code)