javascript - Auto complete search is not working properly, do not iterate all elements in $.each ul li shows on time in response -

i have implemented auto complete search in site. problem response coming not iterate elements in <ul><li> elements. shows 1 element in html coming multiple response.

on top search see if type river comes river records not show in 1 ul li means li iteration not working.

here jquery code:

<script>     $(document).ready(function(){     $('#keyword').keyup(function() {         var total;         $.ajax({             type: "post",             url: "http://realtyexecutivesny.com/getrecset.php?rnd=" + math.random(),             data:{ key: $(this).val() },             success: function(data){                 $.each(data.locations, function( key, value ) {                     total =  '<li>'+data.locations[0].value+'</li>';                 });                $('#lists').html('<ul>'+total+'</ul>');              }         });     });     $('#lists ul li').click(function(){         $('#keyword').val($(this).html());         $('#field').val($(this).parent().data('field'));     });     }); </script> 

here html code:

<input type="text" name="keyword" id="keyword" /> <input type="hidden" name="field" id="field" value="all" /> <div id="lists"></div> 

try using .append() it's more clean approach.

success: function (data) {     $('#lists').html('<ul></ul>') // initiate clear element     $.each(data.locations, function (key, value) {         $('#lists ul').append('<li>' + data.locations[key].value + '</li>'); // append new elements ul element     }); } 

also check this: jquery .html() vs .append()