jQuery Live Search仅在列表中输入第一个结果

debugcn 发表于 Dev

威努

我正在使用以下代码通过SQL查询执行实时搜索。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确认选择的项目仅仅是有史以来第一个在名单上

利奥波德·斯托克

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

您应该将点击事件添加到全部<li>或<a>元素。尝试这个：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。