Quiero hacer que se pueda hacer clic en las etiquetas de elementos de opción dentro de un div. Más como una etiqueta de selección. Podría pensar, ¿por qué no puedo usar un elemento de selección? En mi caso, necesito una barra de búsqueda con un menú. Por lo tanto, he usado una entrada. Lo probé de la siguiente manera. Parece que el atributo de valor no se puede asignar y no se puede hacer clic en él. ¿Alguien tiene alguna idea de esto?
html:
<input id="searchInput" list="searchList" type="text" placeholder="Search.." onkeyup="filterFunction()"> <div id="searchList" class="dropdown-content"> </div>JavaScript:
function fillList(elementIdentifier, data) { const list = document.querySelector(elementIdentifier); data.errorMessages.forEach(element => { const option = document.createElement('option'); option.value = element.MessageId; option.label = element.namespace + ": " + element.message; list.appendChild(option); }); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("searchInput"); filter = input.value.toUpperCase(); div = document.getElementById("searchList"); a = div.getElementsByTagName("option"); for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } }Gran respuesta de @connexo Otra forma es usar el burbujeo de eventos y agregar un detector de eventos al propio div y luego puede obtener el objetivo para verificar en qué opción se hizo clic.
function fillList(elementIdentifier) { const list = document.querySelector(elementIdentifier); var data = { errorMessages: [{ "MessageId": "x", "namespace": "x", "message": "Stack" }, { "MessageId": "y", "namespace": "y", "message": "Overflow" } ] }; data.errorMessages.forEach(element => { const option = document.createElement('option'); option.value = element.MessageId; option.label = element.namespace + ": " + element.message; list.appendChild(option); }); } fillList("#searchList") var div = document.getElementById("searchList"); div.addEventListener('click', (e) => { console.log(e.target.value); }); function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("searchInput"); filter = input.value.toUpperCase(); a = div.getElementsByTagName("option"); for (i = 0; i < a.length; i++) { txtValue = a[i].label; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } <input id="searchInput" list="searchList" type="text" placeholder="Search.." onkeyup="filterFunction()"> <div id="searchList" class="dropdown-content"> </div>¿Por qué reinventar la rueda?
HTML ya lo tiene cubierto. Use una datalist de datos , que ya viene con sugerencias coincidentes en las que se puede hacer clic:
const s = document.getElementById('searchCountries'); const countries = ['USA', 'UK', 'Germany', 'India', 'Finland', 'Canada']; for (const country of countries) { const o = document.createElement('option'); o.value = country; s.append(o); } <input type="search" list="searchCountries" /> <datalist id="searchCountries"></datalist>