JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search_container">
  <input id="search_imput" type="text" autocomplete="off">
  <ul id="search_result_list">
    <li>result 1</li>
    <li>result 2</li>
    <li>result 3</li>
  </ul>
</div>
<div id="result_container">no result
</div>

CSS

#search_container {
 width: 150px;
 height: 20px;
 background: #ffb;
 border: 2px solid #999;
}

li {
 margin: 10px;
 background: #fbb;
 border: 2px solid #999;
}

#result_container {
    position: relative;
    top: 180px;
    background: #bbb;
    border: 2px solid #999;
}

JavaScript

$(function() {
  $('#search_imput').click(function(){
    $('#search_result_list').show();      
  });

  /*it prevented the click triger of the li element click 
  $('#search_imput').focusout(function(){
      $('#search_result_list').hide();   
  });*/

  //the new #search_imput focusout triger
  $(document).unbind('click');
  $(document).click(function(event){
  //if the event elem that was focus is not inside the #search_container, then hide it
    if($(event.target).closest('#search_container').length == 0) {
      $('#search_result_list').hide();
    }
  }); 


  $('#search_result_list').children('li').click(function(){
      //display_selected_user_info:
      $('#result_container').text($(this).text());
  });
   
});