Event similar to "onchange"

Question

Event similar to "onchange"

Navigation

#1 by (3 votes)
#2 by (0 votes)

2

I have a problem with a smart search list that I need to send the form once the value is selected. However, it does not work until I click outside the field.

The code is as follows:

<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>

The go_citylist function generates the following as you type:

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

The problem is that when I finish writing, I select some of the options that meet the search criteria and the event onchange is not activated until I click outside the input (and this does not happen because it is the only one field and there is no submit button).

Is there a javascript event to help me with this? Any other way to send the form?

javascript html

asked by Luis Vasquez 09.10.2018 в 14:12

source

2 answers

Attempt of Eratosthenes sieve in python Write JavaScript variable in the HTML body

score 3 · Answer 1

What you need to do is capture the event 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>

Additionally, as you have requested, you have to differentiate between the modification made by pressing a key of the modification made by selecting one of the options. To do this I go through all the available values and only the form would be sent in case of coincidence with one of them.

If you want a value to be sent independently of the case, you could do the check by lowercasing the string.

score 0 · Answer 2

Ok, in case it works for you, using jQuery only when you click on datalist shoots form, if you write in the input it ignores it

<!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>