У меня есть окно поиска, которое динамически заполняется из базы данных MySQL.
Когда пользователь что-то набирает, он выполняет поиск в базе данных и, используя jquery, отображает результаты поиска с помощью ajax.
Поскольку результаты поиска имеют приоритет отображения, установленный через z-index, результаты поиска отображаются поверх других элементов формы.
Итак, что я делаю, когда пользователь нажимает на документ, показ результатов поиска (если таковые имеются) будет скрыт.
Затем, когда пользователь снова начнет вводить текст в поле поиска, он снова покажет.
Однако проблема, с которой я сталкиваюсь, связана с последним разделом моего кода, где, когда пользователь нажимает на элемент p.result внутри результатов, он ДОЛЖЕН взять p.result и поместить его в. По нажатию p.result ничего не происходит. Результат не вставляется в поле ввода.
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("backend-search.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
$(".search-box").click(function(e){
$(".result").show();
e.stopPropagation();
});
$(document).click(function(){
$(".result").hide();
});
} else{
resultDropdown.empty();
}
});
$('.result').on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<body>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search country..." />
<div class="result"></div>
</div>
</body>
Обратите внимание, что все остальное работает нормально.
После удаления приведенного ниже кода он работает нормально.
$(".search-box").click(function(e){
$(".result").show();
e.stopPropagation();
});
$(document).click(function(){
$(".result").hide();
});
.result - контейнер div для окна результатов.
.search-box - это контейнер div, содержащий все.
Если у кого-нибудь есть идеи, которые могут помочь мне разобраться в этом, я буду очень благодарен.