Html focusout() Select 器不适用于搜索框

//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>