自动完成搜索无法正常工作，不要遍历 $.each 中的所有元素 ul li 按时显示响应

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>';
});

自动完成搜索无法正常工作，不要遍历 $.each 中的所有元素 ul li 按时显示响应

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

javascript

jquery

jquery-autocomplete