javascript - ajax调用/响应，自动完成的附加值是添加但不是过滤

Question

我使用带有 ajax 调用/响应的 javascript 来查询端点并将部分结果返回到表单输入中的数据列表。

这是有效的(意味着我返回的结果正在填充数据列表)，但我的问题是过滤项目。

假设我正在输入中搜索“Box”。输入“B”会返回 13 个项目，并且它们会在数据列表中正确显示。当我添加键入的“o”(“Bo”现在位于输入中)时，我在控制台的新调用/返回中仅返回 7 个项目。但是，我的数据列表显示了所有 20 个项目，它应该只显示最新的 7 个项目，特别是如果某些项目存在于前 13 个项目中。

我在这里做错了什么，导致它无法过滤，或者只显示每次击键的最新结果？

<input id ="productInput"  class="uk-search-field" type="search" placeholder="search products..." list="returnedProducts">
   <datalist id="returnedProducts">

    </datalist>

<script type="text/javascript">

//input event handler
$('#productInput').on('input', function(){
    if($(this).val() === ''){
       return;
    }else{

       //input value
       const searchResult = $(this).val(); 

       $.ajax({ url: '/autocomplete', 
                data: {
                    search_result:searchResult
                },
                "_token": "{{ csrf_token() }}",
                type: "POST", 
                success: function(response){
                    let searchResult = response.hits.hits;
                    for(let i = 0; i < searchResult.length; i++) {

                        $("#returnedProducts").append("<option value=" + searchResult[i]._source.category + ">" + searchResult[i]._source.category + "</option>");
                        console.log(searchResult[i]._source);
                    }
                }
            });
    }

});
</script>

Answer 1

您在这里附加了建议，但从未清除过以前的建议。使用 $('#returnedProducts').empty(); 启动 success 回调应该可以解决问题 ( link to .empty() doc )。