На страничке стоит живой поиск, который начинает делать выборку по городам при вводе двух символов.
Все работает, все отправляется. Но есть одно НО, нужно чтоб люди могли ТОЛЬКО выбирать из предлагаемого списка вариантов.
Если совпадений не найдено,то в выводимых результатах появлялась надпись - СОВПАДЕНИЯ НЕ НАЙДЕНЫ, а при смене фокуса с поля input вводимые данные уничтожаются.
<form method="POST" action="">
<input type="text" name="referal" placeholder="Живой поиск" value="" class="who" autocomplete="off"><input type="submit" name="subscribe" value="Отправить!">
<ul class="search_result" id='popup'></ul>
</form>
<script>
jQuery(function($){
$(document).mouseup(function (e){ // событие клика по веб-документу
var div = $("#popup"); // тут указываем ID элемента
if (!div.is(e.target) // если клик был не по нашему блоку
&& div.has(e.target).length === 0) { // и не по его дочерним элементам
div.hide(); // скрываем его
}
});
}); </script>
if(!empty($_POST["referal"])){ //Принимаем данные
$referal = trim(strip_tags(stripcslashes(htmlspecialchars($_POST["referal"]))));
$db_referal = $mysqli -> query("SELECT * from ".PREFIX."city WHERE city LIKE '%$referal%'")
or die('Ошибка №'.__LINE__.'<br>Обратитесь к администратору сайта пожалуйста, сообщив номер ошибки.');
while ($row = $db_referal -> fetch_array()) {
echo "\n<li>".$row["city"]."</li>"; //$row["name"] - имя таблицы
}
}
$(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();
$(".search_result").fadeOut();
$(".who").val(s_user); //деактивируем input, если нужно
})
})