失去焦点时如何关闭下拉菜单

Question

我正在使用 tailwind css 和 jquery。

我已经尝试了几件事，但我并没有真正明白。 在下面的代码中，您将看到我将焦点放在包含下拉代码的外部 div 上。当搜索框打开时，我将焦点放在搜索框上。它将打开并聚焦于搜索框，下拉菜单保持打开状态就可以了。但是，如果我单击下拉列表中的人员，则应该选择并在其姓名旁边放置一个复选框以指示已选中；但是，下拉菜单会关闭。

我的意思是我猜从技术上来说

<div id="select_users" style="">
                              

<script type="text/javascript">
     function fn_assigned_users() {
          var element_id = 'assigned_users';
          var link_id  = element_id + "_item_link";

          var open = false;
          var selected = [];
          var textField ='text';
          var valueField = 'value';
          var list = JSON.parse('[{"selected": false, "text": "Angela  Law", "value": 1}]');
          var button_elment = $(`#${element_id}_button`);
          var dropdown_elment = $(`#${element_id}_dropdown`);
          var selectedValues = $(`#${element_id}_selected`);
          selectedValues.value = selected.join(",");
          var searchElement = $(`#${element_id}_dropdown_search`);
          dropdown_elment.focusout(function() {
               open = false;
               dropdown_elment.hide();
          });
          searchElement.on("keyup", function multi_dropdown_search_keyup(sender, arg){
               for (let idx = 0; idx < list.length; idx++){
                    if (list[idx][textField].toLowerCase().includes(searchElement[0].value.toLowerCase()))
                         $(`#${link_id}_${idx}`).show();
                    else
                         $(`#${link_id}_${idx}`).hide();
               }
          });
          button_elment.on("click", function multi_dropdown_button_click (sender, args){
               open = !open;
               if (open){
                    dropdown_elment.show();
                    searchElement.focus();
               }
               else 
                    dropdown_elment.hide();
          });


          $(`[id^='${link_id}']`).each(
               (idx, linkElm)=>{ 
                    $(linkElm).on('click', function multi_dropdown_link_click (sender, args){
                         let idx = $(linkElm).data('index');
                         list[idx].selected = !list[idx].selected;
                         itmElement =  $(`#${element_id}_item_check_${idx}`);
                         if (list[idx].selected) {
                             itmElement.show();
                              selected.push(list[idx].value);
                              selectedValues.value = selected.join(",");
                         }
                         else {
                              itmElement.hide();
                              selected = selected.filter(f=> f != list[idx].value);
                              selectedValues.value = selected.join(",");
                         }
                         return false;
                    });
               }
          );
          function clearSelection (){
               for (itm in list){
                    itm.selected = false;
               }
               selected = [];
               selectedValues = "";
               $(`[id^='${link_id}']`).each((idx, linkElm)=>{
                    itmElement =  $(`#${element_id}_item_check_${idx}`);
                    itmElement.hide();
               });
          }
          return {
               clear: clearSelection
          }
     }
     $(function (){
          assigned_users_instance = fn_assigned_users();
     });
</script>



<div class="w-60">
  <div class="relative mt-2">
     <input id="assigned_users_selected" name="assigned_users" type="hidden">
     <button type="button" id="assigned_users_button" name="assigned_users_button" class="relative w-full cursor-default rounded-md bg-white 
               py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 
               focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
          <span class="flex items-center">
               <span class="ml-1 block truncate"> Assign Users</span>
          </span>
          
          <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500">
               <svg class="w-2.5 h-2.5 ms-3" fill="none" viewBox="0 0 10 6">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
               </svg>
          </span>
     </button>
     <div style="display: none;" id="assigned_users_dropdown" name="assigned_users_dropdown" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md 
               bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
          <div class="p-3">
               <input type="text" id="assigned_users_dropdown_search" name="assigned_users_dropdown_search" class="block w-full p-2 ps-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:border-gray-500 
                    rk:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search user">
          </div>
          <ul>
               
               <li class="text-gray-900 relative cursor-default select-none py-2 pl-1 pr-9" id="listbox-option-0" role="option">
                         <a href="#" data-index="0" id="assigned_users_item_link_0" name="assigned_users_item_link_0">
                              <div class="flex items-center">
                                   <span class="font-normal ml-3 block truncate">
                                        Angela  Law
                                   </span>
                              </div>
                              <span style="display:none" id="assigned_users_item_check_0" name="assigned_users_item_check_0" class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4">
                                   <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
                                   </svg>
                              </span>
                         </a>
               </li>

          </ul>
     </div>
  </div>
</div>


                         </div>

我试图让下拉菜单保持打开状态，只要下拉部分中发生任何键入和单击操作。当它在该区域之外单击或键入或选项卡时，它会自动关闭

Answer 1