Make an search bar input, with autocomplete

Viewed 95

I made a input search bar where everything works. I search a GIF and it brings the results, when i search another gif y reomves all and brings the new results. The problem I have is when i try to select a suggestion (autocomplete) it doesnt bring it to the input search bar, so i can make that search. It changes the class of de div ("onClick", "select(this);), but when I press the suggestion it doesnt work the Onclick. Thanks

HTML .

                    </div>
                    <div class="sug sug2" id="sugg2">
                        <a href="#" target="_blank"><img class="lupaSug" src="assets/icon-search.svg" alt="#"></a>
                        <a class="jsSug" href=""></a>

                    </div>
                    <div class="sug sug3"id="sugg3">
                        <a href="" target="_blank"><img class="lupaSug" src="assets/icon-search.svg" alt="#"></a>
                        <a class="jsSug" href=""></a>

                    </div>
                    <div class="sug sug4" id="sugg4">
                        <a href="" target="_blank"><img class="lupaSug" id="lupaSug" src="assets/icon-search.svg"
                                alt="#"></a>
                        <a class="jsSug" href=""></a>

                    </div>

                </div>

JS

/////////// INPUT SEARCH y SUGERENCIAS////////

let searchInput = document.getElementById('searchInput');
let suggDiv = document.getElementById('suggestion');
let suggestion = document.getElementsByClassName('jsSug');
let results = document.getElementById("results");
let searchString = "";// se carga el valor que se vaya tipeando en el input search.
let indexS = 0;
let suggestDataIndex = []; // se cargan en este¿a variable el array de las sugerencias desde la funcion searchSugg();

////// KEYPRESS SUGERENCIAS Y BUSQUEDA DE GIFOS////////

searchInput.addEventListener("keyup", (e) => {
    searchString = e.target.value;
    console.log(searchString);
    // IF PRESS ENTER
    if (e.key === 'Enter') {
        // TRAE LOS RESULTADOS DE LOS GIF BUSCADOS//
        gifoResult();
        // me vacia el input
        document.getElementById('searchInput').value = "";
        // me hace unfocus en el input
        document.getElementById("searchInput").blur();
        // me remueve el resultado anterior de GIF, titulo y ver mas
        document.getElementById('gifosGrid').remove();
        document.getElementById('titleSearch').remove();
        document.getElementById('seeMore').remove();
    }



    else {/// ELSE LLAMA A SUGGESTIONS
        searchSugg();
        /// FUNCION SI APRIETA UNA SUGERENCIA
                for (let index = 0; index < suggestion.length; index++) {

                suggestion[index].setAttribute("onClick", "select(this);");
                console.log(suggestion[index]);

    }

});




function select(element) {
    let selectUserData = element.textContent;
    console.log(selectUserData);
    //searchInput.value = selectUserData;
}
0 Answers
Related