Quiero hacer una entrada de búsqueda que cuando se focusin muestra un dropdown que contiene una lista de valores posibles que se llena usando el lenguaje del lado del servidor. Traté de usar focusin en cualquier elemento que no sea uno de los elementos involucrados usando el código a continuación:
$("body").not($(".dropdownSearch").find("input")).not($(".dropdownSearch").find("a")).on("click focusin", function () { $(".dropdown-menu").hide(); }); Pero cuando ejecuto el código y hago clic en la entrada, en realidad se focusin en la entrada, pero luego se focusin en el cuerpo y el focusout se produce en la entrada.
Y esto es elementos html:
<div class="dropdownSearch dropdown"> <span><input type="text" id="input1" name="input1" class="dropdown-toggle" /></span> <span><input type="text" id="input2" name="input2" class="dropdown-toggle" /></span> <span><input type="text" id="input3" name="input3" class="dropdown-toggle" /></span> <div class="dropdown-menu"> <a class="dropdown-item">name</a> <a class="dropdown-item">name</a> <a class="dropdown-item">name</a> </div> </div>En este código, varias entradas pueden abrir el mismo menú desplegable, pero cambiar los valores usando js lee datos de archivos JSON.
¿Hay alguna forma mejor? Gracias por cualquier ayuda.
Entonces, analicemos un poco su selector, porque no estoy seguro de que esté haciendo lo que usted pretende que haga.
Puede simplificar este $(".dropdownSearch").find("input") que busca cualquier elemento de input como los descendientes de .dropdownSearch a un único selector de descendientes de CSS como este $(".dropdownSearch input") .
Así que tu selector es idéntico a este:
$("body").not(".dropdownSearch input").not(".dropdownSearch a") Lo que esto está buscando es cualquier elemento body , pero luego excluye esa coincidencia si es una input o a , que efectivamente se resuelve simplemente seleccionando el cuerpo:
$("body")Que escuchará todos los eventos que sucedan y burbujearán hasta el cuerpo, independientemente de su origen.
Lo que creo que desea es un controlador delegado para escuchar los eventos que aparecen en el body , pero luego solo procede si coinciden con el selector proporcionado o puede verificar el valor dentro del controlador de esta manera:
$("body").on("click focus", function (e) { var notDropdownEl = $(e.target).is(":not(.dropdownSearch input):not(.dropdownSearch a)") if (notDropdownEl) { $(".dropdown-menu").hide(); } });No estoy muy seguro de lo que está buscando, pero aquí hay un fragmento de pila que ocultará el menú desplegable cuando haga clic fuera del área de búsqueda desplegable.
$("body").on("click focus", function (e) { if ($(e.target).is(":not(.dropdownSearch input):not(.dropdownSearch a)")) { $(".dropdown-menu").hide(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdownSearch dropdown"> Will Not Hide if Clicked here <span><input type="text" id="input1" name="input1" class="dropdown-toggle" /></span> <span><input type="text" id="input2" name="input2" class="dropdown-toggle" /></span> <span><input type="text" id="input3" name="input3" class="dropdown-toggle" /></span> <div class="dropdown-menu"> <a class="dropdown-item">name</a> <a class="dropdown-item">name</a> <a class="dropdown-item">name</a> </div> </div> <p>Will Hide if Clicked Here</p> <input type="text" name="outside" />