如何通过点击事件为搜索输入框设置单个选中结果的值

我有一个搜索栏，支持搜索并点击搜索结果。目前设置了最多显示10条搜索结果，但存在问题：点击结果后，搜索输入框会显示全部10条内容，而非被点击的那一条。我希望仅将被点击的元素或链接设置到搜索框中，且认为无需在服务端进行修改。

原代码 #

HTML #

<div class="search-boxpost" id="searchboxpost">
<input type="text" autocomplete="on" placeholder="Search..." />
<div class="resultpost" id="resultsearchpost"></div>
</div>

jQuery #

// the livesearch bar in makeapost
$(document).ready(function() {
    $('.search-boxpost input[type="text"]').on("keyup input", function() {
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".resultpost");

        if (inputVal.length){
            $.get("includes/searchbar.inc.php", { game: inputVal }).done(function(data) {
                // Display the returned data in browser
                resultDropdown.html(data);
                $('.resultpost').css('display', 'block');

                $(".search-boxpost").focusin(function () {
                    $('.resultpost').css('display', 'block');
                });               
            });
        } else {
            resultDropdown.empty();
        }
    });


    // Set search input value on click of result item
    $(document).on("click", ".resultpost", function() { 
        $(this).parents(".search-boxpost").find('input[type="text"]').val($(this).text());
        $(this).parent(".resultpost").empty();
        $('.resultpost').css('display', 'none');
    });
});

问题原因 #

你把点击事件绑定在了整个.resultpost容器上，触发点击时$(this).text()会获取容器内所有搜索结果的文本内容，自然会把10条结果都塞进输入框里。

解决方案 #

把点击事件绑定到单个搜索结果条目上（假设服务端返回的每条结果是独立的元素，比如<div class="result-item">、<a>等），这样点击时只会获取当前条目的文本。

修改后的jQuery代码 #

// the livesearch bar in makeapost
$(document).ready(function() {
    $('.search-boxpost input[type="text"]').on("keyup input", function() {
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".resultpost");

        if (inputVal.length){
            $.get("includes/searchbar.inc.php", { game: inputVal }).done(function(data) {
                // Display the returned data in browser
                resultDropdown.html(data);
                $('.resultpost').css('display', 'block');

                $(".search-boxpost").focusin(function () {
                    $('.resultpost').css('display', 'block');
                });               
            });
        } else {
            resultDropdown.empty();
        }
    });


    // Set search input value on click of result item
    // 绑定到.resultpost下的每个子元素（如果你的结果有特定类名，比如.result-item，就把选择器改成".resultpost .result-item"）
    $(document).on("click", ".resultpost > *", function() { 
        // 获取当前点击条目的文本
        var selectedText = $(this).text().trim();
        // 找到对应的输入框并设置值
        $(this).closest(".search-boxpost").find('input[type="text"]').val(selectedText);
        // 清空结果容器并隐藏
        $(this).closest(".resultpost").empty().css('display', 'none');
    });
});

关键修改点 #

1. 调整点击事件的目标选择器：从.resultpost改为.resultpost > *（表示容器下的所有直接子元素），如果服务端返回的结果有专属类名（比如每条结果都是<div class="search-result">），可以把选择器改成.resultpost .search-result，匹配更精准。
2. 获取当前点击条目的文本：用$(this).text().trim()获取单个条目的文本，避免多余空格。
3. 更稳妥的容器查找：用closest(".resultpost")替代parent()，如果结果条目有多层嵌套，closest能更可靠地找到父级结果容器。

内容的提问来源于stack exchange，提问作者Votum