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.
$(".seleccionar").remove();
??<select class="js-example-basic-multiple seleccionar" name="states[]" multiple="multiple" id="sel"> </select>
.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 elappend()
, o más bien da error al hacerlo porque ese elemento ya no existe.