自動完成搜索無法正常工作，請不要迭代$ .each中的所有元素。

Question

我已經在自己的網站上實現了自動完成搜索。 問題是響應正確到來，但是它不會迭代<ul><li>元素中的所有元素。 始終顯示HTML中的一個元素，但來自響應多個元素。

在頂部的搜索看到，如果你鍵入唯一的內河它配備了河流的記錄，但不顯示在同一個ul li指li迭代是行不通的。

這是我的Jquery代碼：

<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>

這是HTML代碼：

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

Answer 1

首先初始化總計如

var total = ''; 

並且在您的each ，使用index來獲取所有記錄。

$.each(data.locations, function( index ) {
     total +=  '<li>' + data.locations[index].value + '</li>';
});

$('#lists').html('<ul>' + total + '</ul>'); 

Answer 2

嘗試使用.append()是一種更干凈的方法。

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 to the ul element
    });
}

還要檢查一下： jquery .html（）vs .append（）

Answer 3

替換為：

total =  '<li>'+data.locations[0].value+'</li>';

有了這個：

total +=  '<li>'+data.locations[0].value+'</li>';

並且在每個循環之前定義總計，如下所示：

var total = '';
$.each(data.locations, function( key, value ) {
    total +=  '<li>'+data.locations[0].value+'</li>';
});