Живой поиск - вывод результатов поиска

@stration · Регистрация: 04.08.2016

Author24 — интернет-сервис помощи студентам

Доброго времени суток.

Есть живой поиск, все работает, нужно что бы на этой же странице выводились результаты поиска.

Есть 3 поля (Адрес) (ФИО) (Оборудование)
Ищем по адресу.
При клике на адрес нужно тут же вывести информацию с остальных полей.
__________________
поиск
__________________

результат
__________________
ул. Зеленая
Петров Петр Петрович
Dlink-Dir300

Вот код:

index.html

Кликните здесь для просмотра всего текста

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<title>Живой поиск</title>

<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: 300px;
border-radius: 4px;
max-height:200px;
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>

</head>

<body>

<input type="text" name="referal" placeholder="Живой поиск" value="" class="who" autocomplete="off">
<ul class="search_result"></ul>

</body>
</html>

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","new_db"); //Имя базы
define("DB_USER","anna"); //Пользователь
define("DB_PASSWORD","12345"); //Пароль
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 users ".PREFIX."search WHERE first_name LIKE '%$referal%'")
or die('Ошибка №'.__LINE__.'<br>Обратитесь к администратору сайта пожалуйста, сообщив номер ошибки.');

while ($row = $db_referal -> fetch_array()) {
echo "\n<li>".$row["first_name"]."</li>"; //$row["name"] - имя таблицы
}

}

?>

Спасибо.

@stration 0 / 0 / 0 Регистрация: 04.08.2016 Сообщений: 40
		1
	Живой поиск - вывод результатов поиска 26.04.2017, 14:11. Показов 1704. Ответов 0 Метки нет (Все метки) Доброго времени суток. Есть живой поиск, все работает, нужно что бы на этой же странице выводились результаты поиска. Есть 3 поля (Адрес) (ФИО) (Оборудование) Ищем по адресу. При клике на адрес нужно тут же вывести информацию с остальных полей. __________________ поиск __________________ результат __________________ ул. Зеленая Петров Петр Петрович Dlink-Dir300 Вот код: index.html Кликните здесь для просмотра всего текста <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html"> <title>Живой поиск</title> <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: 300px; border-radius: 4px; max-height:200px; 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> </head> <body> <input type="text" name="referal" placeholder="Живой поиск" value="" class="who" autocomplete="off"> <ul class="search_result"></ul> </body> </html> 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","new_db"); //Имя базы define("DB_USER","anna"); //Пользователь define("DB_PASSWORD","12345"); //Пароль 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 users ".PREFIX."search WHERE first_name LIKE '%$referal%'") or die('Ошибка №'.__LINE__.'<br>Обратитесь к администратору сайта пожалуйста, сообщив номер ошибки.'); while ($row = $db_referal -> fetch_array()) { echo "\n<li>".$row["first_name"]."</li>"; //$row["name"] - имя таблицы } } ?> Спасибо. 0

	26.04.2017, 14:11