Question

在输入术语时，有一个正常工作的livesearch函数，代码如下所示：

$(document).ready(function() {
$('#keyword').on('input', 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()
    };
});
});

这会在下面的代码中显示的输入字段下创建一个列表，我想要做的是填充输入字段，如下所示：

<input type="text" class="form-control" size="100%" placeholder="Enter Holder name Here" id="keyword" name="pmntHolder"/>
<ul id="liveSearchList"></ul>

这让我完全不知道如何实现它，我无法弄清楚如何操纵链接以使用持有者名称填充输入字段。创建的列表如下所示。

**编辑**我尝试添加以下JQuery，但它没有填充输入框：

$(document).ready(function() {
    $('.searchResultItem').on('click', function() {
        var holderName = $(this).find("a").text();
        $('#keyword').val(holderName);
    }); 
});

Answer 1

当您点击$('.searchResultItem');时，您应该获取所点击元素的文字并通过$('#keyword')将其传递给val - 功能：

$('.searchResultItem').on('click', function() {
    // find a-tag in .searchResultItem item and get it's text
    var clickedValue = $( this ).find( "a" ).text();
    // pass founded value to your input
    $('#keyword').val( clickedValue );
});

使用Livesearch选择填充HTML表单

1 个答案: