Поиск по сайту MySQL, PHP
3 месяца назад

Поиск по сайту MySQL, PHP

… как сделать поиск по сайту? Удобный поиск по сайту важен для любого крупного ресурса, с большим количеством информации. Организовать поиск по сайту можно используя специальные модули либо готовые решения от поисковых систем «Google» или «Яндекс» сервисов. Но в случае использования таких сервисов, пользователь будет перенаправлен на стороннюю страницу поиска, на которой и будет производиться выборка по поисковым словам. У данного способа есть свои преимущества и недостатки. Преимуществом использования внешнего поиска можно отметить хорошую функциональность работы проверки слов при вводе, исправление ошибок в словах, автоматическое изменение раскладки клавиатуры. Недостатком можно указать переадресацию на стороннюю страницу, также не все страницы сайта могут быть проиндексированы и попасть в такой поиск. В связи с данными недостатками, веб-разработчики предпочитают создавать у себя на сайте свои собственные поисковые механизмы для внутреннего поиска по сайту. Минимально, если говорить о большом количестве информации на сайте, предполагается хранение данных в базе данных MySQL, и работу функций поисковика на PHP. Ниже описан функционал работы поиска, на основе данного решения возможно добавить функции распознавания окончания слов, но в данной статье данный принцип рассматриваться не будет.

Функционал работы поиска:

– Результаты поиска будут отображаться без перезагрузки страницы, с ограничением в количестве 10 результатов. Чем длиннее слово или поисковая фраза, тем точнее поиск.

– Результат совпадения будет выделяться жирным шрифтом для понимания работы поиска.

– Вывод результатов по наиболее подходящему слову или фразе.

Установка поиска

Для установки поиска на сайте, много времени и знаний не потребуется. В комментариях будут указываться краткие пояснения по отдельно взятым вопросам. Добавьте в нужное место сайта кнопку поиска:

HTML
<ul>
<li><a href="">Пункт меню</a></li>
<li><a href="">Пункт меню</a></li>
<li><a href="" id="button_go">Пункт меню</a></li>
...
</ul>


HTML между тегами <body></body>
<div id="search"> 
 <span class="close">&times;</span>
 <form method="post" action="do_search.php">
   <input type="search" name="search" id="search_box" class='search_box' autocomplete="off" placeholder="найти...">
  </form>

 <div id="result_css">
   <div id="searchresults">Результаты для <span class="word"></span></div>
   <ul id="results" class="update"></ul>
 </div>
</div>


jQuery & JavaScript
$(document).ready(function(){ 
  var modal = document.getElementById("search");
  var span = document.getElementsByClassName("close")[0];

  $('#button_go').on('click', function (e) {
    e.preventDefault();
    modal.classList.add("open");
  });

  span.onclick = function() {
    modal.classList.remove("open");
  }
});

$(function() {
  $("#search_box").keyup(function() {
  // получаем то, что написал пользователь
  var search_value    = $("#search_box").val();
  // формируем строку запроса
  var data = 'search='+ search_value;

  // если search_value не пустая
  if(search_value) {
    // делаем ajax запрос
    $.ajax({
    type: "POST",
    url: "do_search.php",
    data: data,
    beforeSend: function(html) { // запустится до вызова запроса
      $("#results").html('');
      $("#searchresults").show();
      $(".word").html(search_value);
      },
    success: function(html){ // запустится после получения результатов
      $("#results").show();
      $("#results").append(html);
    }
    });
  }
  return false;
  });
});


CSS style.css
#search {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	opacity: 0;
	display: none;
	overflow-y:scroll;
	overflow-x:hidden;
}

#search.open {
	display: block;
	z-index: 10; 
	opacity: 1;
    
}
#result_css {
	position: absolute;
	top: calc(50% + 90px);
	left: 0;
	margin-top: -51px;
	width: 60%;
	margin-left: 20%;
}

#search input[type="search"] {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -51px;
	width: 60%;
	margin-left: 20%;
	color: rgb(255, 255, 255);
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, .8);
	border-bottom: 2px solid rgba(255, 255, 255, .5);
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	font-size: 40px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	text-align: center;
	outline: none;
	padding: 10px;
}

#search .close {
	color: #ffffff;
	float: right;
	margin: 0 20px 0 0;
	padding: 0;
	font-size: 56px;
	font-weight: bolder;
}

#search .close:hover, 
#search .close:focus {
	color: #ff0000;
	text-decoration: none;
	cursor: pointer;
}

ul.update { 
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
}

ul.update li{ 
	padding: 10px;
}

ul.update li a {
	color:#ccc;
	text-decoration:none;
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	padding: 10px;
}

ul.update li a:hover {
	color:#f60000;
}

.found {
	font-weight: bold;
	color: #f60000;
}

#searchresults {
	font-weight: bold;
	color: #ccc;
}


PHP do_search.php
//получаем данные через $_POST
if (isset($_POST['search'])) {
	
// подключение к базе данных
$mysqli = new mysqli("localhost", "Username", "Password", "table");


//проверка входных данных
$word = mysqli_real_escape_string($mysqli, $_POST['search']);
$word = preg_replace("/[^а-яёa-z0-9\s.]/iu", '', $word);

// Строим запрос
$sql = $mysqli->query("SELECT * FROM search WHERE name LIKE '%" . $word . "%' ORDER BY name LIMIT 10");
// Получаем результаты
if (mysqli_num_rows($sql) > '0')
{
  while($row = mysqli_fetch_array($sql))
  {
    $end_result = '';
    $result         = $row['name'];
    $bold           = '<span class="found">' . $word . '</span>';
    $bold_key       = '<span class="found">' . $word . '</span>';
    $end_result     .= '<li><a href="">'.str_ireplace($word, $bold, $result).'</a></li>';
    
	echo $end_result;
  }	
}else {
  echo '<li style="color: #fff;">По вашему запросу ничего не найдено</li>';
}
}


SQL
CREATE TABLE `search` (
  `id` int(5) NOT NULL,
  `name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Дамп данных таблицы `search`
--

INSERT INTO `search` (`id`, `name`) VALUES
(7, 'Смартфоны'),
(9, 'Умные часы и браслеты'),
(10, 'Наушники и Bluetooth-гарнитуры'),
(11, 'Аксессуары для смартфонов'),
(12, 'Аксессуары для смарт-часов'),
(13, 'Гаджеты для здоровья и фитнеса'),
(14, 'Рации'),
(15, 'Радиотелефоны'),
(16, 'Спутниковые телефоны'),
(17, 'Проводные телефоны'),
(18, 'Словари и переводчики'),
(19, 'Запчасти для мобильных телефонов');


Подключить библиотеку jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
140
Комментарии