Скрыть результаты поиска при нажатии в любом месте, ожидая результатов поиска в Jquery
Я пытаюсь создать панель поиска в стиле Gmail. В основном панель поиска, которая позволяет пользователю вводить результат поиска и отображать результат во всплывающем окне. См. изображение ниже.
В этом дизайне, если я щелкну где-нибудь на странице, я хочу скрыть результаты поиска. Но если я нажму на результаты поиска, я хочу вместо этого выполнить какую-то другую работу (открыть небольшое модальное всплывающее окно, установить некоторые переменные сеанса и т. д.).
Ниже представлен дизайн и структура мероприятия, которые я придумал.
<div onfocusout = "return HideSearchResultBox(this,event);">
<input type = "text" id = "MainPageSearchBar" placeholder = "Search here..." oninput = "return DisplaySearchResult();" onfocus = "return DisplaySearchResultBox();"/>
<div class = "card searchresultcard" style = "width:100%">
<div class = "card-body p-2" id = "searchResultDisplayDiv">
</div>
</div>
</div>
Вот код, который я использовал для создания элементов результатов.
<div id = "SearchBarResult' + someID + '" onclick = "return OpenSearchResultTab(' + someID + ');">
<label> DisplayText <span class = "badge badge-pill badge-accent" style = "float:right">Member</span></label>
<label> SubText</label>
</div>
По сути, я пытаюсь скрыть div с результатами поиска, когда основной div (включая окно поиска и результаты) теряет фокус, что отлично работает.
Проблема в том, что когда я нажимаю на результаты поиска, событие "onfocusout" основного div (включая поле поиска и результаты) по-прежнему запускается. Итак, если я нажимаю на результат поиска, div закрывается, и событие клика результата поиска никогда не срабатывает.
Я попробовал несколько предложений от самого stackoverflow, которые я мог найти, например, перемещение события «onfocusout» в основной контейнер div или использование события mouseup. Но проблема остается прежней. Я пытался найти цель события, но каждый раз это было нулевым.
Редактировать: Я попытался удалить код, который скрывает результат поиска, и тогда событие щелчка для элементов результатов поиска работает нормально. Итак, если я скрою результат поиска, событие click не будет запущено.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
вам нужно будет проверить, находится ли мышь внутри результата поиска, когда панель поиска теряет фокус, попробуйте следующее,
let flag=false;
//code of on over of search result item
function handleMouseOver(){
flag=true
}
//code for mouse leave of search result item
function handleMouseLeave(){
flag=false;
}
//you focus out event of search box
function hadleFocusOut(){
if (flag){
//do not hide search result,focus goes to search result item
//allow user to select search result item
}else{
//hide search result
}
}
Спасибо. Вот чего мне не хватало. Установка флага при наведении курсора — самый простой способ определить цель события.
Вам нужно проверить, не нажали ли вы за пределами области поиска.
$(document).on("click touchstart", function(e) {
var t = $(e.target).closest('#SearchBoxContainer');
var exceptDiv = $('#SearchBoxContainer');
if (exceptDiv.is(t) == false) {
//clicked oustide of div
$('#searchResultDisplayDiv').hide();
}
});
function DisplaySearchResultBox() {
$('#searchResultDisplayDiv').show();
}
function doSomething() {
alert('Do Something');
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "SearchBoxContainer">
<input type = "text" onfocus = "DisplaySearchResultBox();">
<div class = "" id = "searchResultDisplayDiv" style = "display: none;">
<ul style = "background:#ccc">
<li onclick = "doSomething()">This is search Result</li>
<li onclick = "doSomething()">This is search Result</li>
<li onclick = "doSomething()">This is search Result</li>
<li onclick = "doSomething()">This is search Result</li>
<li onclick = "doSomething()">This is search Result</li>
<li onclick = "doSomething()">This is search Result</li>
<li onclick = "doSomething()">This is search Result</li>
</ul>
</div>
</div>В приведенном выше примере есть четкая инструкция для элемента поиска DOM, что после потери фокуса закрыть блок поиска. Необходимо изменить подход для достижения желаемого функционала.
Одним из способов может быть добавление обработчика событий в тело документа и проверка, не запускается ли событие щелчка не из результатов поиска, а затем закрытие контейнера поиска.
Надеюсь это поможет.
Нажмите на редактор сниппетов
[<>]и укажите минимальный воспроизводимый пример.