Listing after select from an autocomplete

Question

Hello, my question is:

By making a select in some of the options of autocomplete, should show the content on the page.

When clearing the entered data on input, page back to previous state.

That is, when selecting, it will open what was selected, and when clearing the field of the input, show the previous topics.

follows below my codes:

HTML:

<form class="submit-line" id="form">

      <input  id="buscaPerguntas" autocomplete="off" class="form-control input-faq" placeholder="Digite palavras-chaves para pesquisar" style="padding: 28px;">

</form>
                </div>

            </div>
        </div>
        <div class="row">
            <div id="buscaPerguntas-description">
            </div>
        </div>



        <div class="divFaq" id="listaFaq">
            <div class="row">
                {% for valor in faq%}

                <div class="col-sm-12">

                    <div class="boxFaq">
                        <a class="btn btn-faq accordion" type="button" data-toggle="collapse" data-target="#{{valor.id}}" aria-expanded="true">
                             {{valor.pergunta}}
                        </a>
                    </div>
                </div>

                <div class="col-sm-12">
                    <div id="{{valor.id}}" class="collapse">
                        <div class="boxFaq">
                            <div class="card-body">
                                <div>{{valor.resposta|raw}}</div>
                            </div>
                        </div>
                    </div>
                </div>

                {% endfor %}

            </div>

JS:

$(function () {

    $("#buscaPerguntas").autocomplete({

        autoFocus: true,
        minLength: 1,
        appendTo: '#form',
        source: function (request, response) {

            $.ajax({
                url: '/pesquisafaq',
                type: 'post',
                data: {
                    dadosPesquisa: request.term

                }


            }).done(function (data) {

                let parse = JSON.parse(data)

                if (parse.length > 0) {

                    let dados = Object.values(parse).map((e) => {

                        return {
                            label: e.pergunta,
                            desc: "<div class='divFaqCollapse'><div class='col-sm-12'><div class='boxFaq'><a class='btn btn-faq accordion' type='button' data-toggle='collapse' data-target='#collapse' aria-expanded='true'>" + e.pergunta + "</a></div></div> <div class='col-sm-12'> <div id='collapse' class='collapse'> <div class='boxFaq'> <div class='card-body'> <div>" + e.resposta + "</div> </div> </div> </div> </div> </div>",

                        }

                    })
                    response(dados.slice(0))
                }


            });

        },
        select: function (event, ui) {

            $("#buscaPerguntas").val(ui.item.label);
            $("#buscaPerguntas-description").html(ui.item.desc);


            $('#listaFaq').hide();
            $('#buscaPerguntas-description').show();

        }

    })

});

Answer 1

since no one ever answers me... I was able to solve the problem and decided to share because maybe it could be the same doubt of other people.

I just needed to validate what was coming in input and from there showed the contents that I wanted...

my JS got like this:

$(function () {
$("#buscaPerguntas").autocomplete({

    autoFocus: true,
    minLength: 1,
    appendTo: '#form',
    source: function (request, response) {

        $.ajax({
            url: '/pesquisafaq',
            type: 'post',
            data: {
                dadosPesquisa: request.term

            }


        }).done(function (data) {
            // console.log(data);
            let parse = JSON.parse(data)

            if (parse.length > 0) {


                let dados = Object.values(parse).map((e) => {

                    return {
                        label: e.pergunta,
                        desc: "<div class='divFaqCollapse'><div class='col-sm-12'><div class='boxFaq'><a class='btn btn-faq accordion' type='button' data-toggle='collapse' data-target='#collapse' aria-expanded='true'>" + e.pergunta + "</a></div></div> <div class='col-sm-12'> <div id='collapse' class='collapse'> <div class='boxFaq'> <div class='card-body'> <div>" + e.resposta + "</div> </div> </div> </div> </div> </div>",

                    }

                })
                response(dados.slice(0))
            }


        });


    },
    select: function (event, ui) {

                $("#listaFaq").hide();
                $("#buscaPerguntas-description").html(ui.item.desc).show();


        $('#form').keyup(function () {
            $('#buscaPerguntas').each(function () {

                if (this.value == '') {
                    $("#listaFaq").show();
                    $("#buscaPerguntas-description").hide();
                } else {
                    $("#buscaPerguntas-description").html(ui.item.desc).show();
                    $("#listaFaq").hide();

                    //  $("#buscaPerguntas").val(ui.item.label);

                }




            });

        });


    }



});