使用自动完成功能进行搜索栏输入

时间:2021-04-17 14:55:10

标签: javascript search input autocomplete

我制作了一个输入搜索栏,一切正常。我搜索一个 GIF,它带来了结果,当我搜索另一个 gif 时,我会重新搜索所有并带来新的结果。我遇到的问题是,当我尝试选择建议(自动完成)时,它不会将其带到输入搜索栏,因此我可以进行搜索。它更改了 de div 的类(“onClick”、“select(this);),但是当我按下建议时,它对 Onclick 不起作用。谢谢

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 个答案:

没有答案