Mostrando conteudo de após selecionar do autocomplete.

[sthefany silva 0]

Olá, minha dúvida é ao fazer um selecte em algum as opções do autocomplete mostrar contudo na pág. e ao limpar os dados inseridos no input fazer com que volte ao estado anterior. 

 

ou seja, ao seleconar ele abrirar o que foi seleconado, ao limpar campus do input mostrar topicos anterior.

 

 

segue abaixo meus códigos: 

 

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>

 

 

 

 

JAVASCRIPT:

 

$(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();

            

        }

 

    })

 

});