How to delete input and bring filter options back

0

Good afternoon I have a cod. I want to be able to do this, but I do not know how to do this, but I do not know how to do this. just to simplify I made a reset button, which deletes my input but does not bring the options back, just brings it back if I manually delete it.

This is 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 is 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");
            });
        });
    });
    
asked by anonymous 19.01.2018 / 16:43

2 answers

0
$("#dialog").dialog({
       close: function (event, ui) {
            $('#idInput').val("");
       }
   });
    
19.01.2018 / 18:20
1

Is it a modal bootstrap?

If it is, you only need to do the following

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

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

    
19.01.2018 / 17:12