Así que creé un pequeño cuadro de búsqueda que filtrará una lista seleccionada de opciones a medida que escribe. También quería que filtrara la lista al pegar en el cuadro de búsqueda, pero parece que no funciona.
El problema ocurre cuando usa el mouse, hace clic con el botón derecho y luego hace clic en pegar. ctrl+v funciona bien.
También noté que funciona si pega dos veces o si el cuadro de texto ya tiene texto y lo resalta y reemplaza el texto actual en el cuadro. O pega y luego comienza a escribir (ya que la función onkeyup comenzará a tomar el control)
Entonces, por ejemplo, con mi código a continuación, simplemente copie la palabra "amarillo" u otro color, haga clic derecho en el cuadro de búsqueda y haga clic en pegar. No filtra.
Alguna idea de como arreglar esto? ¡Gracias!
function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInputz69"); filter = input.value.toUpperCase(); div = document.getElementById("authorCC"); 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"; } } } <div id="authorCC"> <input type="text" class="affsearch" placeholder="Search.." id="myInputz69" onkeyup="filterFunction()" onpaste="filterFunction()"> <select class="affselect" name="authorCC" id="authorCC" size="5" > <option value="-">-</option> <option value="blue">blue</option> <option value="green">green</option> <option value="red">red</option> <option value="yellow">yellow</option> </select> </div>Si bien no puedo decirle exactamente por qué onpaste no funciona en este contexto, ¿por qué no simplemente eliminar la necesidad de hacer dos controladores de eventos separados y en su lugar enganchar el evento de input ? Funcionará con (a) eventos clave que conducen a cambios en el valor de entrada, (b) un evento de pegado invocado con CTRL - V y (c) un evento de pegado invocado a través del menú contextual:
function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInputz69"); filter = input.value.toUpperCase(); div = document.getElementById("authorCC"); 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"; } } } <div id="authorCC"> <input type="text" class="affsearch" placeholder="Search.." id="myInputz69" oninput="filterFunction()"> <select class="affselect" name="authorCC" id="authorCC" size="5" > <option value="-">-</option> <option value="blue">blue</option> <option value="green">green</option> <option value="red">red</option> <option value="yellow">yellow</option> </select> </div>