focusout()选择器与搜索框不工作

Question

focusout函数防止用户在单击搜索结果中的标题时重定向到标题页。当我点击页面上的不同元素时，它就会关闭搜索结果，但是当我点击搜索结果时，搜索结果也会关闭。

我试过使用模糊函数以及hide()和show()，但我得到了相同的结果。我知道我有。result display none但这不应该阻止我点击搜索结果吗?怎么了?

// jquery.js
$(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("includes/searchbar.inc.php", {
term: inputVal
}).done(function(data) {
// Display the returned data in browser
resultDropdown.html(data);
$('.result').css('display', 'block');
$("#searchboxy").focusout(function() {
$('.result').css('display', 'none');
});
$("#searchboxy").focusin(function() {
$('.result').css('display', 'block');
});
});
} else {
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result", function() {
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- header.php -->
<div class="search-box" id="searchboxy">
<input type="text" autocomplete="off" placeholder="Search for a game or genre..." />
<div class="result" id="resultsearch"></div>
</div>

Answer 1

您的代码中的主要问题是有一个focusout事件处理程序，每次搜索输入将失去焦点时都会触发。这个事件也会在点击结果的时候发生。

不幸的是，这样的事件会在点击事件发生在结果上之前发生，因此一旦您将它们隐藏在第一个处理程序中，点击处理程序就不会再触发了。

实现相同行为的一种快速方法，但是有一个关于哪个元素被单击以更好地执行基于条件的逻辑的线索，就是将单击事件处理程序附加到整个文档，并且每次检查单击的元素是否具有#searchboxy父元素。在第一种情况下，它会隐藏结果，而在第二种情况下，它不会。

为了演示，我从api中发明了一个自定义结果，它不清楚将返回哪种数据。奇怪的是，您只是将它的输出附加到结果html..我没动它。

我还更改了捕获结果项上的单击事件的方式。将事件处理程序只附加到父结果一次。

//makeSearch is replacing your fetch to an unreachable url
//but you didn't explain what's supposed to return.. so I'm inventing a raw html
const makeSearch = (term) => {
return new Promise((resolve, reject) => {
resolve(`
<ul>
<li>Result1</li>
<li>Result2</li>
<li>Result3</li>
</ul>`
);    
});
}
//on click on the whole document
$(document).on('click', function(event){  
//if the clicked element doesn't belong to the group #searchboxy
if(!event.target.closest('#searchboxy')){
//hides the .result
$('.result').css('display', 'none');
}
});
//on focusin on the input text, shows the .result
$("#searchboxy").on('focusin', function() {      
$('.result').css('display', 'block');
});
//on click on the .result box...
$(document).on("click", ".result", function(event) {  
const textOfClickedResultElement = event.target.innerText;  
$(this).parents(".search-box").find('input[type="text"]').val( textOfClickedResultElement);
$(this).parent(".result").empty();
});
$(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("includes/searchbar.inc.php", {
//  term: inputVal
//})

//I replaced your search request with a bogus promise for the sake of the demo
makeSearch(inputVal)
.then(function(data) {          
// Display the returned data in browser
//!this is weird.. you are outputting the fetched data as is in the html! (I left it untouched)
resultDropdown.html(data);
$('.result').css('display', 'block');
});
} else {
resultDropdown.empty();
}
});

});

.info{
margin-bottom: 10px;
}
#searchboxy{
border: dashed 3px lightgray;
padding: 10px 10px;
}
#searchboxy input{
width: 15rem;
}
#resultsearch{
border: solid 1px gray;
display: none;
margin-top: 1rem;
}
#resultsearch li{
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- header.php -->
<div class="info">
Start typing inside the textbox to show the search results.<br>
Clicking anywhere outside the dashed borders, will hide the results.<br>
Giving focus to the textbox, will show the results.<br>
If you click any single result item, its value will be pushed in the search box.
</div>
<div class="search-box" id="searchboxy">
<input type="text" autocomplete="off" placeholder="Search for a game or genre..." />
<div class="result" id="resultsearch"></div>
</div>