Skip to main content
se añadieron 106 caracteres en el cuerpo
Origen Enlace

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
          alert  console.log('SUBMIT''submit');
            //$(this).closest('form').submit();
        }
      })
    });
</script>
</body>
</html>

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) {
        if(e.originalEvent.composed===false){ // ES POR CLICK EN DATALIST
          alert('SUBMIT');
            $(this).closest('form').submit();
        }
      })
    });
</script>
</body>
</html>

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>

se añadieron 902 caracteres en el cuerpo
Origen Enlace

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

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

<!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) {
        if(e.originalEvent.composed===false){ // ES POR CLICK EN DATALIST
          alert('SUBMIT');
            $(this).closest('form').submit();
        }
      })
    });
</script>
</body>
</html>

Usa el evento oninput

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

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) {
        if(e.originalEvent.composed===false){ // ES POR CLICK EN DATALIST
          alert('SUBMIT');
            $(this).closest('form').submit();
        }
      })
    });
</script>
</body>
</html>

Origen Enlace

Usa el evento oninput

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