Как передать POST-данные? Живой поиск

142

veleg

2 ноября 2016, 15:49

1813

Есть код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/search.js"></script>
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
 
<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>
 
<?php echo $_POST["referal"]; ?>
 
<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>

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();
$(".search_result").fadeOut();
$(".who").val(s_user).attr('', ''); //деактивируем input, если нужно

})

})

PHP обработчик

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

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

}

При клике на нужный ответ в поле input отображается нужная фраза, но в атрибуте value его нет. Как передать этот параметр в обработчик?

Фигачу Телеграм-ботов ( https://teleg.run/veleg )

20

Центик

2 ноября 2016, 15:56

#1

veleg:
но в атрибуте value его нет

потому что вы грузите его яваскриптом - он не меняет исходный код страницы.Но то что вы видите в поле можете спокойно передавать в базу

LinkBoss.net - Трастовые ссылки для увеличения трафика в 10 раз! (http://linkboss.net/)

142

veleg

2 ноября 2016, 16:00

#2

Центик:
потому что вы грузите его яваскриптом - он не меняет исходный код страницы.Но то что вы видите в поле можете спокойно передавать в базу

А каким образом по нажатию кнопки ОТПРАВИТЬ передать выбранное значение?

369

Samail

2 ноября 2016, 16:23

#3

veleg:

$(".who").val(s_user).attr('', ''); //деактивируем input, если нужно

Деактивируем:

$(".who").val(s_user).attr('disabled', 'disabled');

Или активируем

$(".who").val(s_user).attr('disabled', false);

Или ничего не делаем:

$(".who").val(s_user);

142

veleg

2 ноября 2016, 16:52

#4

Спасибо. С отправкой разобрался. Даже в коде ничего менять не пришлось. ИЗначально $_POST не выводило.

С JS сколько пытался подружиться, так и не сложились отношения.

Подскажите, как реализовать поиск таким образом, чтоб если не нашел совпадений, то выводил "что совпадений не найдено" и при потери фокуса с input поле очищалось.

jpg 156915.jpg

Поле input возможность выбрать Отправка данных для заполнения Как сделать такое?

142

veleg

3 ноября 2016, 21:37

#5

Город не найден я сделал.

Как сделать, чтобы поле input очищалось при условии, что город не найден и что был клик вне этого input?

$i=0;

while ($row = $db_referal -> fetch_array()) { $i++;

echo "\n<li><span>".$row["city"]."</span></li>"; //$row["name"] - имя таблицы
}
if($i == 0){echo "\n<li>Нет такого города</li>";}

$(".search_result").on("click", "li span", function(){
s_user = $(this).text();
$(".search_result").fadeOut();
$(".who").val(s_user);

})

369

Samail

3 ноября 2016, 22:30

#6


$(document).mouseup(function (e){ 
var popup_text = $("#popup").text();
var input = $(".who"); 
if (!input.is(e.target) && popup_text=='Нет такого города'){
  $("#popup").html('');
  $(".who").val('');
}
});

142

veleg

4 ноября 2016, 12:00

#7

Samail:


$(document).mouseup(function (e){ 

var popup_text = $("#popup").text();

var input = $(".who"); 

if (!input.is(e.target) && popup_text=='Нет такого города'){

  $("#popup").html('');

  $(".who").val('');

}

});

Сделал подобным образом. Поле не очищается. Может ли это связано с тем, фраза передается вместе с тэгом li? Хотя я и так пробовал <li>...</li>

jQuery(function($){

	$(document).mouseup(function (e){ // событие клика по веб-документу

		var div = $("#popup"); // тут указываем ID элемента

		if (!div.is(e.target) // если клик был не по нашему блоку

		    && div.has(e.target).length === 0) { // и не по его дочерним элементам

			div.hide(); // скрываем его

		}

			

		var popup_text = $("#popup").text();

		var input = $(".who"); 



		if (!input.is(e.target) && popup_text=='Нет такого города'){

			$("#popup").html('');

			$(".who").val('');

		}



	});

	

});

369

Samail

4 ноября 2016, 15:23

#8

После

var popup_text = $("#popup").text();

Вставьте

alert(popup_text);

И поглядите какой там текст показывает.

1

142

veleg

4 ноября 2016, 16:20

#9

Samail:
После

var popup_text = $("#popup").text();

Вставьте

alert(popup_text);

И поглядите какой там текст показывает.

Спасибо ☝

Последний вопрос и все)

Как сделать, чтобы если текст равен 'Нет такого города', не срабатывал клик по кнопке отправить и клавиша enter?

369

Samail

4 ноября 2016, 17:21

#10

$("form").submit( function () {

if($("#popup").text()=='Нет такого города'){return false;}

} );

Вышел новый Яндекс Браузер с YandexGPT и YandexART

Переиграть и победить: как анализировать конкурентов для продвижения сайта