0

tengo la siguiente consulta para resolver...

Tengo un datalist con informacion de una base de datos donde muestro numeros de parte, la cuestion es la siguiente que si funciona bien pero se puede ingresar cualquier numero y me gustaria que solo me deje seleccionar de los numeros que estan en mi datalist que no deje ingresar otros.

Tengo el siguiente codigo de un ejemplo que encontre, que es como algo similar a lo que busco pero no del todo, ya que cada que escribes una palabra manda un alert.

$(function() {
  $('#browserinput').on('input',function() {
    var opt = $('option[value="'+$(this).val()+'"]');
    alert(opt.length ? opt.attr('id') : 'NO OPTION');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id='browserinput' list="browsers">

<datalist id="browsers">
  <option id="op1" value="Internet Explorer" />
  <option id="op2" value="Firefox" />
  <option id="op3" value="Chrome" />
  <option id="op4" value="Opera" />
  <option id="op5" value="Safari" />
</datalist>

Este es mi datalist se ve claramente que la busqueda funciona pero me gustaria que si al pasar al siguiente input y el numero de parte escrito no esta dentro de los que salen ese datalist, se le haga un clear al input y mandar un alert o un mensaje bajo el input, espero haber sido claro y me puedan ayudar.

introducir la descripción de la imagen aquí

Mi codigo:

<div class="form-group">
    <label>Numero de parte</label>
    <input list="brow" type="text" id="psb_np" name="psb_np" class='form-control' autocomplete="off" onChange="buscarNP();" disabled required />
    <datalist id="brow">
        <option value disabled selected>Seleccione una opcion...</option>
            <?php
            try {
                while ($rows = $QueryResultParts->fetch_assoc()){
                printf ("<option>".$rows["number_part"]."</option>");
                }
                } catch (PDOException $e) {
            echo $e ->getMessage();
                }
            ?>
    </datalist>
</div>
3
  • En el evento .onChange del Combobox.
    – Bicho
    Commented el 27 feb. 2020 a las 14:43
  • En que parte ya agrege mi codigo de mi datalist. @Eric
    – EduardoMX
    Commented el 27 feb. 2020 a las 14:51
  • Debes agregar un id al option y en el jquery $("#option").change(function(){ }. Puedes agregar un alert para ver si funciona el evento
    – Bicho
    Commented el 27 feb. 2020 a las 14:56

1 respuesta 1

0

No es necesario que gastes poder de computación en tu aplicación al estar evaluando el valor de la entrada cada vez que el usuario escriba algo diferente.

Para este ejemplo, yo supuse que esa datalist está dentro de un form que será enviado a algún controlador backend (de igual forma, si no es el caso, este ejemplo te puede servir).

No está de más decir que usé datos estáticos para llenar el datalist

// app.js

function getExistingValues(dataListId) { // Optiene los valores existentes del datalist
    const optionInputs = document.getElementById(dataListId).children;
    let values = [];
    for (const childrenValue of optionInputs) {
        values.push(childrenValue.innerHTML);
    }
    return values;
}

$(document).ready(function () {
    $('#form').submit(e => {
        let EXISTING_VALUES = getExistingValues('list');
        const inputValue = $('#input').val();
        if (EXISTING_VALUES.indexOf(inputValue) == -1) {
            e.preventDefault();
            alert('El valor del input no existe en la base de datos');
        }
    });
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StackOverflow example</title>
</head>
<body>
    <form action="#" id="form">
        <input type="text" list="list" id="input">
        <datalist id="list">
            <option id="op1" value="Internet Explorer" >Internet Explorer</option>
            <option id="op2" value="Firefox" >Firefox</option>
            <option id="op3" value="Chrome" >Chrome</option>
            <option id="op4" value="Opera" >Opera</option>
            <option id="op5" value="Safari" >Safari</option>
        </datalist>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

Espero te sirva y por cualquier duda estaré pendiente de los comentarios.

2
  • esto me sirvio pero tengo una duda no sabes de que manera puedo hacer los resets a determinados inputs, aplique el "$("#frmpsb")[0].reset();" pero es a todo el formulario, como lo aplico a determinados inputs, gracias.
    – EduardoMX
    Commented el 28 feb. 2020 a las 18:56
  • Te invito a formularlo en una pregunta nueva para darle su debida resolución Commented el 28 feb. 2020 a las 19:00

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.