search

LeaVerou / awesomplete

Ultra lightweight, usable, beautiful autocomplete with zero dependencies.
http://leaverou.github.io/awesomplete/
MIT License
6.96k stars 611 forks source link

double list of items #17208

Closed ghost closed 4 years ago

ghost commented 4 years ago

Hi! I use awesomplete to get a list of food products in a textbox that we will call 'textArticoli', when I insert a new food product, in another form called 'newArticolo', I reset the array 'arr' which I pass to 'new Awesomplete ( ) and call 'new Awesomplete (textArticoli, {list: arr});', this creates me a double list, one with the old items and one with the new item, how is it possible to reset the previous Awesomplete list associated with ' textArticoli '?

`

<body>
    <h2 style="color:white; text-align:center; font-family:arial;" >Registro Spesa</h2>
    <div style="text-align:center;"> 
        <div class="specchietto">
            <h4 class="titoli">Inserimento Articolo</h3>
            <form name="form" >
                <input class="input" id="textarticolo" placeholder="articolo" type="text" required/>
                <p><input class="input" id="textcosto" placeholder="costo" type="number" required step="0.01" />
                <p><input class="input" id="textquantita" placeholder="quantità"type="number" required/>
                <p><input class="input" id="textnegozio" placeholder="negozio" type="text" required/>
                <!--<p><select class="inputselect" id="textnegozio" placeholder="negozio" type="text" required/>
                    <option value="" disabled selected>negozio</option>
                </select>-->
                <p><input class="input" id="textdata" placeholder="data" onfocus="(this.type='date')" onfocusout="(this.type='text')" required />
                <p><input class="pulsanti" type="button" value="Inserisci" onClick="inviaDati()">
            </form>
        </div>
        <div class="specchietto">
            <h4 class="titoli">Creazione Nuovo Articolo</h3>
            <form name="formNuovoArticolo" >
                <input class="input" id="textnewarticolo" placeholder="articolo" type="text" required/>
                <p><input class="input" id="textcategoria" placeholder="categoria" type="text" required/>
                <p><input class="pulsanti" type="button" value="Inserisci" onClick="inviaNuovoArticolo()">
            </form>
        </div>
    </div>

    <script>

    var arrArticoli = new Array();
    var arrNegozi = new Array();
    var arrCategorie = new Array();

    caricaArticoli();
    caricaNegozi();
    caricaCategorie();

    function popola(textbx, arr){

        var textbox = document.getElementById(textbx);
        new Awesomplete(textbox, {list:arr});

    }

    // recupera gli articoli e li mette nell array arrArticoli
    function caricaArticoli() {

        return new Promise((resolve, reject) => {

            const xhr = new XMLHttpRequest();
            xhr.open('get','http://localhost:8080/getArticoli', true);
            xhr.onload = () => resolve(xhr.responseText);
            xhr.onerror = () => reject(xhr.statusText);
            xhr.send();

        }).then(responseText => {

            var parsedRT = JSON.parse(responseText);
            var parsedRTLenght = Object.keys(parsedRT).length;

            arrArticoli = [];

            for(let i = 0; i < parsedRTLenght; i++) {
                arrArticoli.push(parsedRT[i].articolo);
            }

            popola("textarticolo", arrArticoli);

        }).catch((statusText) => {

            // Log the rejection reason
            console.log('Errore: ('+statusText+')');
            alert("Errore:"+statusText);

        });
    }

    // recupera i negozi e li mette nell array arrNegozi
    function caricaNegozi() {

        return new Promise((resolve, reject) => {

            const xhr = new XMLHttpRequest();
            xhr.open('get','http://localhost:8080/getNegozi', true);
            xhr.onload = () => resolve(xhr.responseText);
            xhr.onerror = () => reject(xhr.statusText);
            xhr.send();

        }).then(responseText => {

            var parsedRT = JSON.parse(responseText);
            var parsedRTLenght = Object.keys(parsedRT).length;

            arrNegozi = [];

            for(let i = 0; i < parsedRTLenght; i++) 
                arrNegozi.push(parsedRT[i].negozio);

            popola("textnegozio", arrNegozi);

        }).catch((statusText) => {

            // Log the rejection reason
            console.log('Errore: ('+statusText+')');
            alert("Errore:"+statusText);

        });

    }

function caricaCategorie() {

        return new Promise((resolve, reject) => {

            const xhr = new XMLHttpRequest();
            xhr.open('get','http://localhost:8080/getCategorie', true);
            xhr.onload = () => resolve(xhr.responseText);
            xhr.onerror = () => reject(xhr.statusText);
            xhr.send();

        }).then(responseText => {

            var parsedRT = JSON.parse(responseText);
            var parsedRTLenght = Object.keys(parsedRT).length;

            arrCategorie = [];

            for(let i = 0; i < parsedRTLenght; i++) {
                arrCategorie.push(parsedRT[i].categoria);
            }

            popola("textcategoria", arrCategorie);

        }).catch((statusText) => {

            // Log the rejection reason
            console.log('Errore: ('+statusText+')');
            alert("Errore:"+statusText);

        });
    }

    // invia i dati al server server-express_promiseAll     
    function inviaDati(){                       

        console.log("inviaDati");

        articolo = document.getElementById("textarticolo").value;
        costo = document.getElementById("textcosto").value;
        quantita = document.getElementById("textquantita").value;
        negozio = document.getElementById("textnegozio").value;
        data = document.getElementById("textdata").value;

        if( arrArticoli.includes(articolo) && arrNegozi.includes(negozio) ){

            return new Promise((resolve, reject) => {

                //invio al server
                const xhr = new XMLHttpRequest();
                var params="articolo="+articolo+"&costo="+costo+"&quantita="+quantita+"&negozio="+negozio+"&data="+data;
                xhr.open('get','http://localhost:8080/inserisciDati'+'?'+params, true);
                //xhr.setRequestHeader('Access-Control-Allow-Origin','*');
                //xhr.setRequestHeader('Content-type','application/json');
                //xhr.setRequestHeader('Access-Control-Allow-Methods','GET');
                xhr.onload = () => resolve(xhr.responseText);
                xhr.onerror = () => reject(xhr.statusText);
                xhr.send();

                // codici di risposta dal server
                xhr.onreadystatechange = function (){

                    if(xhr.readystate == 4){

                        switch(xhr.status){

                            case 200:
                                alert("dati inseriti correttamente");
                                break;

                            case 404:
                                alert("la pagina non esiste");
                                break;

                            case 500:
                                alert("si è verificato un' errore sul server");
                                break;

                            default:
                                alert("switch non risolto");

                        }

                    }

                }

            }).then(responseText => {

                if(responseText=="OK"){
                    alert("dati inseriti correttamente");
                    //resetta le textbox
                    document.getElementById("textarticolo").value = "";
                    document.getElementById("textcosto").value = "";
                    document.getElementById("textquantita").value = "";
                }else
                    alert("errore dal Server, controllare i log del server nodejs");

            }).catch((statusText) => {

                // Log the rejection reason
                console.log('Errore: ('+statusText+')');
                alert("Errore:"+statusText);

            });

        } else{

            if(!arrArticoli.includes(articolo))
                alert("Articolo inesistente");

            if(!arrNegozi.includes(negozio))
                alert("Negozio inesistente");
        }
    }

function inviaNuovoArticolo(){                      

        console.log("inviaNuovoArticolo");

        articolo = document.getElementById("textnewarticolo").value;
        categoria = document.getElementById("textcategoria").value;

        document.getElementById("textnewarticolo").value = "";
        document.getElementById("textcategoria").value = "";

        return new Promise((resolve, reject) => {

            //invio al server
            const xhr = new XMLHttpRequest();
            var params="articolo="+articolo+"&categoria="+categoria;
            xhr.open('get','http://localhost:8080/inserisciNuovoArticolo'+'?'+params, true);
            xhr.onload = () => resolve(xhr.responseText);
            xhr.onerror = () => reject(xhr.statusText);
            xhr.send();

            xhr.onreadystatechange = function (){

                if(xhr.readystate == 4){

                    switch(xhr.status){

                        case 200:
                            alert("dati inseriti correttamente");
                            break;

                        case 404:
                            alert("la pagina non esiste");
                            break;

                        case 500:
                            alert("si è verificato un' errore sul server");
                            break;

                        default:
                            alert("switch non risolto");

                    }

                }

            }

        }).then(responseText => {

            if(responseText=="OK"){

                alert("dati inseriti correttamente");
                caricaArticoli();
            }else
                alert("errore dal Server, controllare i log del server nodejs");

        }).catch((statusText) => {

            // Log the rejection reason
            console.log('Errore: ('+statusText+')');
            alert("Errore promise:"+statusText);

        });

    }

    </script>
</body>

`

bbenjamin commented 4 years ago

With just the sample code pasted above, there's no way of knowing what data is being returned by the endpoints. This makes it impossible to know if the issue is due to Awesomplete or the data itself.

Although this isn't something I'd typically do (nor should anyone really :) ). I refactored your code to remove all the async/promise activity, and instead called popola() with hard-coded data.

Use "qq" to search any input to get results. When doing this, you'll see the results of one autocomplete list never appears in another. This confirms awesomplete is not combining lists, the data being returned by your endpoint is.

This should be sufficient evidence to close the issue. @canerandagio1983 if you continue to have problems you believe are due to Awesomplete and would like to file another issue, please provide a Codepen or similar resource that reproduces the issue.