AJAX example

[jparadaa]

AJAX example

[kraaden]

Hi @jparadaa

Here I created an example for you how to use it with an AJAX backend:

https://jsbin.com/nevekicala/edit?html,js,output

[jparadaa]

Hi @kraaden

I appreciate your answer, but I need a little more help please, this is my code I am trying, but I get "weird" results, it doesn't always return full results or if I type a product description that I know exists, it doesn't locate it.

<input type="text" id="producto" placeholder="buscar producto">

<script>
 var input = document.getElementById("producto");

 function callback(text, update) {					
    const data = {
        term: text
    };

    fetch('listProductos', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(res => {
        // Muestra la respuesta completa en la consola para depuración
        console.log("Respuesta de la API:", res);
        return res.json();
    })
    .then(json =>
        json.map(item =>
            ({
                label: item.descripcion,
                value: item.id
            }))
            .filter(item => item.value.toLowerCase().includes(text))
    )
    .then(update);
}

 autocomplete({
    input: input,
    fetch: callback,
    onSelect: function (item) {
        input.value = item.label;
    }
});

</script>

Can you please see if I am doing something wrong.

I appreciate your help.

Regards,
Javier

[kraaden]

I suggest the field should be called description but in your case it's called descripcion

[jparadaa]

sorry, I don't understand