2

Tengo un problema con una lista de búsqueda inteligente que necesito que, una vez que se haga la selección del valor, se envíe el formulario. Sin embargo no funciona hasta que hago clic fuera del campo.

El código es el siguiente:

<input id="ComunaBuscador" name="city" class="form-control" placeholder="Escribe la comuna" list="cities" autocomplete="off" required onchange='this.form.submit()' >
<datalist id="cities">
<?php go_citylist();?>
</datalist>

La función go_citylist genera lo siguiente a medida que vas escribiendo:

<datalist id="cities">
<option value="Arica">
<option value="Cañete">
<option value="Hualañé">
<option value="Independencia">
<option value="Papudo">
<option value="Temuco">                    
</datalist>

El problema es que cuando termino de escribir, selecciono alguna de las opciones que cumplen el criterio de búsqueda y no se activa el evento onchange hasta que hago clic fuera del input (y esto no ocurre porque es el único campo y no hay botón submit).

¿Existe algún evento javascript que me ayude con esto? ¿Alguna otra forma de enviar el formulario?

4
  • podrias poner el codigo js ?
    – andy gibbs
    Commented el 9 oct. 2018 a las 12:49
  • El código js es simplemente un onchange en el input así onchange='this.form.submit()' Commented el 9 oct. 2018 a las 13:21
  • Modificaciones hechas en mi respuesta, espero que sea lo que buscas. Commented el 9 oct. 2018 a las 13:32
  • Hola @LuisVasquez. Si alguna respuesta solucionó tu duda deberías marcarla como tal pulsando en el icono que hay junto a ella. Gracias. Commented el 11 oct. 2018 a las 10:37

2 respuestas 2

4

Lo que necesitas es capturar el evento input:

<script>
/* Función que comprueba si lo introducido coincide con una opción o no */
function comprobar() {
    /* Buscamos el valor del campo input */
    let input = document.getElementById('ComunaBuscador').value;
    /* Buscamos cada uno de los elementos "option" del "datalist" */
    let cities = document.querySelectorAll('datalist#cities > option');
    /* Comprobamos cada uno de ellos en busca de una coincidencia exacta */
    for (let i = 0; i < cities.length; i++) {
        if (input == cities[i].value) {
           console.log("Enviando el formulario con valor '" + input + "'");
           return;
        }
    };
    /* Si hemos terminado el bucle significa que no podemos enviar el formulario aún
        porque no se ha introducido un valor de los disponibles */
    console.log("No se envía aún el formulario");
}
</script>
<input id="ComunaBuscador" name="city" class="form-control"
    placeholder="Escribe la comuna"
    list="cities" autocomplete="off" required
    oninput="comprobar()" />
<datalist id="cities">
  <option value="Arica">
  <option value="Cañete">
  <option value="Hualañé">
  <option value="Independencia">
  <option value="Papudo">
  <option value="Temuco">                    
</datalist>

Adicionalmente, tal y como has solicitado, hay que diferenciar entre la modificación realizada por la pulsación de una tecla de la modificación realizada por seleccionar una de las opciones. Para ello recorro todos los valores disponibles y sólo se enviaría el formulario en caso de coincidencia con uno de ellos.

Si quieres que se pueda enviar un valor independientemente de la coincidencia de mayúsculas y minúsculas, podrías hacer la comprobación convirtiendo a minúsculas la cadena.

2
  • 1
    Sos un genio amigo! Gracias! Commented el 9 oct. 2018 a las 13:45
  • Si la respuesta solucionó la pregunta recuerda marcarla como correcta para que la pregunta se considere cerrada. Gracias. Commented el 4 sept. 2019 a las 8:35
0

Vale, por si te sirve, usando jQuery solo cuando se hace click sobre datalist dispara form, si escribes en el input lo ignora

<!DOCTYPE html>
<html>
<body>

<form action="" method="get">
    <input id="ComunaBuscador" name="city" class="form-control" placeholder="Escribe la comuna"         list="cities" autocomplete="off" required>
<datalist id="cities">
<option value="Arica">
<option value="Cañete">
<option value="Hualañé">
<option value="Independencia">
<option value="Papudo">
<option value="Temuco">                    
</datalist>
</form>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
  $(function(){
      $('#ComunaBuscador').on('input', function(e) {
        var lowercase = $(this).val().toLowerCase();
      	$(this).val(lowercase) 
        if(e.originalEvent.composed===false){ // ES POR CLICK EN DATALIST
            console.log('submit')
            //$(this).closest('form').submit();
        }
      })
    });
</script>
</body>
</html>

6
  • Gracias Jorge, pero ¿en este caso no se enviaría el formulario cada vez que escribo una letra? Commented el 9 oct. 2018 a las 13:20
  • Así es @LuisVasquez, ya que cada pulsación de tecla genera una modificación en el valor del input. ¿Cómo diferenciarías la introducción manual con la selección? ¿Pulsando enter o con un botón? Tendrías que decidirlo. Commented el 9 oct. 2018 a las 13:22
  • si. Creo que lo que estoy pidiendo no se puede, porque la idea es enviar el formulario sólo al final, es decir, cuando queda solo una opción y la elijo Commented el 9 oct. 2018 a las 13:23
  • Entonces la solución puede ser sencilla, mira mi respuesta, en ella estoy haciendo la modificación (tardaré un par de minutos). Commented el 9 oct. 2018 a las 13:24
  • Ya lo tienes, amigo. Solo haces submit si haces click en algun option, si escribes por input aunque sea igual que el datalist lo ignoramos Commented el 9 oct. 2018 a las 13:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.