javascript - Showing loader.gif with getJSON -

i want use loader gif while retrieving data through ajax getjson. have not found proper solution yet. have used $("#loader").show(); , $("#loader").hide(); starts page loads. want work when click search button. suggestion highly appreciated. here html codes:

<div class="container">         <div id="wrapper">             <section id="gallery">                 <input type="text" id="kunde"  placeholder="search name or id." /> <di id="loader"><img src="loader.gif"/></di>                 <button id="buton" type="button" class="btn-style" value="search" onclick="find();">search</button>                 <button id="button" class="btn-style">clean results</button>              </section>             <ul id="list"><li> </li> </ul>         </div> 

here jquery codes:

<script>                       $("#button").click(function (e) {                 $("#list").find('li').remove();             });             $(function () {                 $("#kunde").focus();             });             $(document).keypress(function (e) {                 if (e.which == 13) {                     $("#buton").click();                 }             });             var uri = 'navisioncustomer.json';             function find() {                 var info = $('#kunde').val();                 $("#loader").show();                 $.getjson(uri)                                     .done(function (data) {                         var item = data.filter(function (obj) {                             return obj.name === info || obj.id === info;                         })[0];                         if (typeof item !== 'undefined' || item !== null) {                             $("#list").append("<li>id      = " + item.id + "<br />name    = " + item.name + "<br />phone      = " + item.phone + "<br />contact       = " + item.contact + "<br />balancelcy      = " + item.balancelcy + "<br /> creditlimitlcy       = " + item.creditlimitlcy + "</li>");                         }                     })                                           .fail(function (jqxhr, textstatus, err) {                                $('#kunde').text('error: ' + err);                            });                 $("#loader").hide();             }             var options = {                 url: "navisioncustomer.json",                 getvalue: "name",                 list: {                     match: {                         enabled: true                     }                 },                 theme: "square"             };             $("#kunde").easyautocomplete(options);                                </script> 

you use .always callback of json, read more on: http://api.jquery.com/jquery.getjson/

function find() {     var info = $('#kunde').val();     $("#loader").show();     $.getjson(uri)                         .done(function (data) {             var item = data.filter(function (obj) {                 return obj.name === info || obj.id === info;             })[0];             if (typeof item !== 'undefined' || item !== null) {                 $("#list").append("<li>id      = " + item.id + "<br />name    = " + item.name + "<br />phone      = " + item.phone + "<br />contact       = " + item.contact + "<br />balancelcy      = " + item.balancelcy + "<br /> creditlimitlcy       = " + item.creditlimitlcy + "</li>");             }         })                        .fail(function (jqxhr, textstatus, err) {             $('#kunde').text('error: ' + err);         })         .always(function () { $("#loader").hide(); }); } 

what original code saying show loader > make request > hide loader, , using callback hide loader wait till result