How to delete input and bring back filter options

Question

Good afternoon I have a Cod. of filter that works very well, it is inside a dialog, but I need that when I leave the dialog that is in the same html, the value of the input returns to empty and the options that disappeared as it was typed appear again. Just to simplify I did a reset button, which erases my input but does not bring back the options, only brings back if I delete manually.

this and my Cod.

<img class="opener4" src="./imagem/gravata.png"   style="width: 25px;  margin-left: 10px; cursor:pointer; "/>
<h4 class="opener4"  id="titulo2">Gerenciando</h4>
<!-- Modal -->
<div class="modal fade ola" id="ModalLong" tabindex="-1" role="dialog" aria-labelledby="ModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div  class="modal-content quartoModal">
            <div class="modal-header modais">
                <h2  class="modal-title"  id="ModalLongTitle">Gerenciando</h2>
                <br></br>
                <img class="voltar" src="./imagem/voltar.png"  style="cursor:pointer;"  />
                <form >
                    <input type="reset"  value="Reset"/>
                    <input id="txtBusca" class="txtBusca" autocomplete="off" autofocus="autofocus"  type="text" placeholder="&ensp;&ensp;Procurar &ensp;&ensp;&ensp;"/>
                </form>
                <h3 style="margin-left: 100px">Business Intelligence</h3>
                <ul class="ulItens">
                    <li> <a href="#"    type="button" id="btn-btn" class=" voltar"><img  alt="" id="logo" src="./imagem/dashboard.png" />&ensp;&ensp;Dashboard</a></li>
                    <li> <a href="#"    type="button" id="btn-btn" class=" voltar"><img  alt="" id="logo" src="./imagem/producer.png" />&ensp;&ensp;Produtores</a></li>
                    <li> <a href="#"    type="button" id="btn-btn" class=" voltar"><img  alt="" id="logo" src="./imagem/producao.png"/>&ensp;&ensp;Produção Agrícola</a></li>
                    <li> <a href="#"    type="button" id="btn-btn" class=" voltar"><img  alt="" id="logo" src="./imagem/arrecadacao.png" />&ensp;&ensp;Arrecadação</a></li>
                </ul>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
</div>

//this to open the dialog

$(function() {
    $( ".quintoModal" ).dialog({
        width: 450,
        autoOpen: false,
        position: { my: "left top", at: "left top+50"},
        show: {
        effect: "slide",
        duration: 1200,
          easing:"easeOutExpo",
          direction:"left", 
          distance:800, 
        },
        hide: {
        effect: "slide",
        duration: 1000,
          easing:"easeInExpo",
          direction:"left", 
          distance:800, 
        },
    });
    $( ".opener5" ).click(function() {
        $( ".quintoModal" ).dialog( "open");
        $( ".quintoModal" ).dialog( "option", "resizable", false );
        $( ".quintoModal" ).dialog( "option", "draggable", false );

        $(".voltar").click(function () {
          $( ".quintoModal" ).dialog( "close" );
        });
    });
});

// this and the filter

$(function(){
    $(".txtBusca").on("keyup", function(){
        var texto = $(this).val();
        $(".ulItens li").css("display", "block");
        $(".ulItens li").each(function(){
            if($(this).text().toUpperCase().indexOf(texto.toUpperCase()) < 0)
                $(this).css("display", "none");
            });
        });
    });

Answer 1

It’s a modal bootstrap?

If it is, you just do the following

$('#ModalLong').on('hidden.bs.modal', function () {
    $('#txtBusca').val('');
})

The event hidden.bs.modal is fired every time the modal is closed. There you can program some kind of behavior.

Answer 2

$("#dialog").dialog({
       close: function (event, ui) {
            $('#idInput').val("");
       }
   });