Question

使用以下代码通过SQL查询执行livesearch。 Jquery代码如下所示：

$(document).ready(function() {
    $('#holdername').on('keydown', function() {
        var searchKeyword = $(this).val();
        if (searchKeyword.length >= 3) {
            $.post('holdersearch.php', { keywords: searchKeyword }, function(data) {
            $('ul#liveSearchList').empty()
            $.each(data, function() {
            $('ul#liveSearchList').append('<span class="searchResultItem"><a href="#?hldr=' + this.id + '">' + this.holder + '</a></span></br>'); 
                });
                }, "json").fail($('ul#liveSearchList').empty()); 
            } else {
                $('ul#liveSearchList').empty() 
            };
        });
    $('#liveSearchList').on('click', function() {
        var holderName = $(this).find("a").html();
        console.log("Holder: ",holderName);
        $('#holdername').val(holderName);
        $('ul#liveSearchList').empty()
    });
});

这会创建列表，但是当选择（单击）列表中的任何项目时，它将仅使用列表中的第一项填充输入框。我不知道为什么会这样做，如果我将鼠标悬停在列表中，链接会显示hldr的不同值，因为它应该是它应该正常工作。 console.log确认所选项目只是列表中的第一项

Answer 1

您在整个ul上添加了点击事件，因此$(this).find("a").html();选择所有<a>元素并返回第一个值

您应该向所有<li>或<a>元素添加点击事件。试试这个：

$('#liveSearchList').on('click', 'li', function() {
    var holderName = $(this).find("a").html();
    console.log("Holder: ",holderName);
    $('#holdername').val(holderName);
    $('ul#liveSearchList').empty()
});

Jquery Live Search仅输入列表中的第一个结果

1 个答案: