使用Livesearch选择填充HTML表单

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');时，您应该获取所单击元素的文本，并通过val-function将其传递给您的$('#keyword')：

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