0

Estoy creando una especie de buscador con ajax, entonces uso el evento keyup para capturar los datos ingresados y por cada letra ingresa hacer una consulta en php con like

$sql = "SELECT * 
          FROM usuarios
         WHERE nombres LIKE '%$search%' 
           ";
        foreach ($result as $rows) {
            $data[] = array(
                'names' => $rows['nombres_usuarios']);
        }
        if (isset($data)) {
            echo json_encode(($data));
        } else {
            echo json_encode(['sin datos']);
        }

Entonces por cada tecla ingresada voy recibiendo distintos resultados los mismos que se almacenan en forma de un .json. Resulta que cada vez que hago una consulta con ajax

$(".select2-selection").on("keyup", function(e) {
                const valInput = $('.select2-search__field').val()
                $.ajax({
                    method: "POST",
                    url: base_url + "/nombres.php",
                    data: {
                        valInput: valInput,
                    },
                    cache: true,
                    success: function(result) {
                         console.log(result);
                         //$(".seleccionar").remove();
                        var show = "";
                        var resp = JSON.parse(result);
                        for (x of resp) {
                            const names = x.names;
                            show += `<option value="">${names}</option>`;         
                        }
                        $(".seleccionar").append(show);
                    },
                    
                });
            });

Activo el evento keyup y este envía datos a través del ajax por lo que con cada vez que presiono una tecla se van haciendo consultas y estas se van acumulando en el dom. DE modo que cuando quiero mostrarlos en el front-end me muestra todos los registros y no solo el que estoy buscando. Hay alguna manera de borrar las consultas acumuladas, resetearlas o eliminarlas para cuando intente mostrar el resultado me muestre solo el buscaddo y no todo lo que esta acumulado en el DOM? Eh probado con remove,empty pero no consigo nada.

5
  • probaste con $(".seleccionar").remove(); ??
    – David081
    Commented el 3 dic. 2022 a las 2:11
  • si lo probe antes de hacer el for y despues del for y nada. O de que forma deberia probar con $(".seleccionar").remove(); Commented el 3 dic. 2022 a las 2:13
  • porque usas el selector con la clase y no con su id?, deberias incluir tu codigo html tambien, que elementos tienen la clase .seleccionar?
    – David081
    Commented el 3 dic. 2022 a las 2:16
  • bueno como el ID es unico entonces por eso estaba usando en su lugar una clase. en el html solo estoy usando un select con buscador donde puedo meter los datos a buscar. <select class="js-example-basic-multiple seleccionar" name="states[]" multiple="multiple" id="sel"> </select> Commented el 3 dic. 2022 a las 2:19
  • El .remove() te elimina tambien el/los elemento/s que coincida/n con el selector que has colocado. Para eliminar el contenido del mismo se usa .empty(). Si eliminas el selector con .remove() después no aparecerá su contenido al hacer el append(), o más bien da error al hacerlo porque ese elemento ya no existe.
    – masterguru
    Commented el 4 dic. 2022 a las 6:10

1 respuesta 1

0

$.ajax tiene un metodo abort() que lo que hace es indicar que independientemente del estatus no ejecute el vento success puedes guardar tu llamada en una variable y en el metodo beforeSend que haga el abort() de la llamada previa, el siguiente codigo es un ejemplo de mas o menos como lo haria:

var isProcessing = false;
var configs = {};
var ajax = {};
 $(".select2-selection").on("keyup", function(e) {
    const valInput = $('.select2-search__field').val();
    configs = {
        method: "POST",
        url: base_url + "/nombres.php",
        data: {
            valInput: valInput,
        },
        cache: true,
        beforeSend: function(){
         if(isProcessing)
          ajax.abort();
          isProcessing=true;
        },
        success: function(result) {
            isProcessing = false;
            console.log(result);             
            var show = "";
            var resp = JSON.parse(result);
            for (x of resp) {
                const names = x.names;
                show += `<option value="">${names}</option>`;         
            }
            $(".seleccionar").append(show);
        },
        complete: function(){
            isProcessing = false;
        }
        
    };
    
    ajax = $.ajax(configs);
});

el isProcessing lo utilizo solo para que mientras este haciendo la llamada cancele la anterior, validando que ya hubiera al menos una llamada hecha. pero puedes quitar esa condicion para que lo cancele siempre, solo validar que la variable ajax no sea nula.

Espero te sirva de ejemplo.

1
  • gracias eh estado jugando con este ejemplo pero no la verdad, no logro hacerlo funcionar sigo con lo mismo. Commented el 3 dic. 2022 a las 17:54

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.