Недавно реализовал клиенту живой поиск на лендинге и решил поделиться скриптом.
Как работает живой поиск
При вводе в input слова, начинает искать в базе данных похожие выражения.
В скрипте я настроил так, что при вводе двух символов и более, начинается поиск и выдача результатов.
При клике на результат, он попадает в поле поиска, а сам результат скрывается и поле деактивируется.
Скрипт можно сделать под себя при необходимости. Ничего сложного.
index.html
В нём подключаем только библиотеку ajax и наш скрипт search.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/search.js"></script>Стили:
<style>
.search{
position:relative;
}
.search_result{
background: #FFF;
border: 1px #ccc solid;
width: 100px;
border-radius: 4px;
max-height:100px;
overflow-y:scroll;
display:none;
}
.search_result li{
list-style: none;
padding: 5px 10px;
margin: 0 0 0 -40px;
color: #0896D3;
border-bottom: 1px #ccc solid;
cursor: pointer;
transition:0.3s;
}
.search_result li:hover{
background: #F9FF00;
}
</style>И сам html:
<input type="text" name="referal" placeholder="Живой поиск" value="" class="who" autocomplete="off">
<ul class="search_result"></ul>Файл search.js
$(function(){
//Живой поиск
$('.who').bind("change keyup input click", function() {
if(this.value.length >= 2){
$.ajax({
type: 'post',
url: "search.php", //Путь к обработчику
data: {'referal':this.value},
response: 'text',
success: function(data){
$(".search_result").html(data).fadeIn(); //Выводим полученые данные в списке
}
})
}
})
$(".search_result").hover(function(){
$(".who").blur(); //Убираем фокус с input
})
//При выборе результата поиска, прячем список и заносим выбранный результат в input
$(".search_result").on("click", "li", function(){
s_user = $(this).text();
//$(".who").val(s_user).attr('disabled', 'disabled'); //деактивируем input, если нужно
$(".search_result").fadeOut();
})
})Обработчик запросов search.php
<?php
define("DB_HOST","localhost");
define("DB_NAME",""); //Имя базы
define("DB_USER",""); //Пользователь
define("DB_PASSWORD",""); //Пароль
define("PREFIX",""); //Префикс если нужно
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
$mysqli -> query("SET NAMES 'utf8'") or die ("Ошибка соединения с базой!");
if(!empty($_POST["referal"])){ //Принимаем данные
$referal = trim(strip_tags(stripcslashes(htmlspecialchars($_POST["referal"]))));
$db_referal = $mysqli -> query("SELECT * from ".PREFIX."search WHERE name LIKE '%$referal%'")
or die('Ошибка №'.__LINE__.'<br>Обратитесь к администратору сайта пожалуйста, сообщив номер ошибки.');
while ($row = $db_referal -> fetch_array()) {
echo "\n<li>".$row["name"]."</li>"; //$row["name"] - имя поля таблицы
}
}
?>У кого будут вопросики, спрашивайте, не стесняйтесь.
Комментариям всегда рад.
Внимание
Это самый простой пример живого поиска, который не рекомендуется использовать на своих сайтах.
Как минимум нужно сделать кучу проверок, а ещё лучше сделать всё на PDO а не на mysqli, что бы обеспечить безопасность.
Любой профи сможет с лёгкостью взломать сайт или базу и вытащить секретные данные.
Все взломы происходят в основном через поиск.
Это самый простой пример живого поиска, который не рекомендуется использовать на своих сайтах.
Как минимум нужно сделать кучу проверок, а ещё лучше сделать всё на PDO а не на mysqli, что бы обеспечить безопасность.
Любой профи сможет с лёгкостью взломать сайт или базу и вытащить секретные данные.
Все взломы происходят в основном через поиск.
Скачать пример живого поиска
2015-05-06
