Estoy tratando de implementar un campo de texto con búsqueda desplegable. Los elementos desplegables son botones dentro de un div que tiene display: none propiedad CSS. Cuando hago clic en él, el campo de texto debe cambiar su contenido al contenido del botón.
El problema es que el menú desplegable debería desaparecer cuando se elimina el foco del campo de texto. Cuando hago clic en un elemento del menú desplegable, se elimina el foco, el botón desaparece y su onclick no se ejecuta. ¿Es posible ejecutar el código del botón que selecciona el nombre antes de ejecutar el código que elimina este botón?
function showNames() { document.getElementById("dropdown_names").style.display = 'block' } function hideNames() { document.getElementById("dropdown_names").style.display = 'none' } function selectName(name) { document.getElementById("name_inp").value = name } #resident_name_inp:focus { outline: 3px solid #ddd; } .dd { position: relative; display: inline-block; } .dd-content { display: none; position: absolute; background-color: #f6f6f6; overflow: auto; width: 100%; border: 1px solid #ddd; z-index: 1; } .dd-content button { background-color: #ffffff; width: 100%; padding-left: 4px; border: none; display: block; } .dd-content button:hover { background-color: #ddd; } <div class="dd"> <input id="name_inp" type="text" placeholder="Search Names..." onfocus="showNames()" onfocusout="hideNames()"> <div id="dropdown_names" class="dd-content"> <button type="button" onclick="selectName('alex')">alex</button> <button type="button" onclick="selectName('jake')">jake</button> <button type="button" onclick="selecttName('evgen')">evgen</button> </div> </div>Puede usar el objetivo relacionado para verificar si hizo clic en un elemento de botón relacionado con la entrada. Esto es lo que hay que editar:
function hideNames() { if(event.relatedTarget != null){ if(event.relatedTarget.tagName == 'BUTTON'){ return } } document.getElementById("dropdown_names").style.display = 'none' } function selectName(name) { document.getElementById("name_inp").value = name document.getElementById("dropdown_names").style.display = 'none' }Solución ES6 que usa funciones de flecha, funciona para múltiples menús desplegables y muchos comentarios en el JS para explicar lo que está sucediendo.
También rehizo el estilo para usar la cuadrícula CSS.
/* Get array of all .dd elements */ const dropdowns = Array.from(document.getElementsByClassName('dd')); /*For each .dd element */ dropdowns.forEach(dropdown => { const input = dropdown.firstElementChild; const names = dropdown.lastElementChild; /* Add click event listener to <input> of .dd */ input.addEventListener('click', () => dropdown.classList. toggle('show') ); /* For each button in .dd-content */ Array.from(names.children).forEach(option => { /* Add click event listener button */ option.addEventListener('click', () => { /* Set input value to button value */ input.value = option.innerHTML; /* Remove .show class from dropdown */ dropdown.classList.remove('show'); }) }); }); .dd { display: grid } .dd input { text-align: center } .dd input { cursor: s-resize } .dd.show input { cursor: n-resize } .dd .dd-content { grid-row-start: 2; border: 1px solid #ddd; display: none; } .dd.show .dd-content { display: block } .dd .dd-content button { background-color: #ffffff; width: 100%; padding-left: 4px; border: none; display: block; } .dd .dd-content button:hover { background-color: #ddd } <div class="dd"> <input type="text" placeholder="Search Names..."> <div class="dd-content"> <button type="button">alex</button> <button type="button">jake</button> <button type="button">evgen</button> </div> </div> <hr> <div class="dd"> <input type="text" placeholder="Some Thing Else"> <div class="dd-content"> <button type="button">Some</button> <button type="button">Thing</button> <button type="button">Else</button> </div> </div>