Лучший способ удержать пользователя на сайте, это позволить ему найти, то что он ищет. Если вы делаете для этого удобную систему, то уровень предпочтения вашего сайта будет расти и пользователь обязательно вернётся для того, чтобы найти то, что его интересует.
Я вам покажу как создать простую, но эффективную по функционалу, поисковую форму, которая будет использоваться для поиска статей на сайте. Результаты будут появляться на странице без никаких перезагрузок, что несомненно является лучшим способом подачи информации.
Я создам 2 файла: search.php, который будет содержать HTML и JavaScript. Второй файл, do_search.php будет содержать PHP код. Приступим к созданию первого файла:
PHP, jQuery search demo
$(function() {
$(".search_button").click(function() {
// получаем то, что написал пользователь
var searchString = $("#search_box").val();
// формируем строку запроса
var data = "search="+ searchString;
// если searchString не пустая
if(searchString) {
// делаем ajax запрос
$.ajax({
type: "POST",
url: "do_search.php",
data: data,
beforeSend: function(html) { // запустится до вызова запроса
$("#results").html("");
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // запустится после получения результатов
$("#results").show();
$("#results").append(html);
}
});
}
return false;
});
});
Попробуйте ввести слово ajax
Результаты для
В этом файле мы создали обычную HTML форму, которая посылает POST запрос в бэк энд - файлу do_search.php.
PHP код содержит комментарии, по которым вы с лёгкостью сможете понять работу скрипта. Если в базе данных нашлись совпадения, вы показываете их вашему пользователю, выделяя жирным те слова, которые искал пользователь.
Придадим всему этому немного CSS:
Body{ font-family:Arial, Helvetica, sans-serif; } *{ margin:0;padding:0; } #container { margin: 0 auto; width: 600px; } a { color:#DF3D82; text-decoration:none } a:hover { color:#DF3D82; text-decoration:underline; } ul.update { list-style:none;font-size:1.1em; margin-top:10px } ul.update li{ height:30px; border-bottom:#dedede solid 1px; text-align:left;} ul.update li:first-child{ border-top:#dedede solid 1px; height:30px; text-align:left; } #flash { margin-top:20px; text-align:left; } #searchresults { text-align:left; margin-top:20px; display:none; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#000; } .word { font-weight:bold; color:#000000; } #search_box { padding:4px; border:solid 1px #666666; width:300px; height:30px; font-size:18px;-moz-border-radius: 6px;-webkit-border-radius: 6px; } .search_button { border:#000000 solid 1px; padding: 6px; color:#000; font-weight:bold; font-size:16px;-moz-border-radius: 6px;-webkit-border-radius: 6px; } .found { font-weight: bold; font-style: italic; color: #ff0000; } h2 { margin-right: 70px; }
Вот вы и научились создавать простейшую поисковую форму, которая работает без перезагрузки страницы. Надеюсь, урок вам понравился.
В сегодняшнем уроке мы рассмотрим поиск php mysql . Скриптов поиска огромное множество, некоторые используют базу данных, другие обходятся без нее, есть расширенные поиски с точной сортировкой. Мы же остановимся на обычном простом поиске, который ищет информацию по двум таблицам из базы данных MySQL .
Первый шаг. База данных MySQL.
Создаем базу данных search_lite , в ней две таблицы news - новости и vac - вакансии.
Задаем привилегии:
Логин - "root ",
Пароль - "",
Хост - "localhost ".
Дамп таблицы news - новостей.
Table structure for table `news` -- CREATE TABLE IF NOT EXISTS `news` (`id` int(2) NOT NULL, `title` varchar(255) NOT NULL, `text` text NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=cp1251;
Дамп таблицы vac - вакансий.
Table structure for table `vac` -- CREATE TABLE IF NOT EXISTS `vac` (`id` int(2) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `text` text NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=3 ;
Второй шаг. HTML и PHP.
Подключаемся к базе данных. Задаем условие по переменной $search , в которой поисковый запрос не введен, либо он меньше 4-х символов, а также проверяем на слеши и обрезаем переменную. Создаем два запроса, которые ищут в базе данных две таблицы news и vac по условию поиска по полю text . (Вы можете сами уже выбирать, сколько таблиц нужно будет для поиска. К примеру, у Вас будут таблицы lessons , materials , articles и т.п.. Также можете менять условия поиска, вместо поля text , можно выбрать поле title или другое поле.) Затем указываем сколько символов в тексте при выводе поиска в переменной $symbolls. Если же в таблицах news и vac по поиску ничего не найдено, выводим сообщение. Если же найдено, выводим данные из двух таблиц news и vac по заданному запросу поиска.