Javascript ajax调用/响应，自动完成的附加值是添加，但不是筛选

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

这就是工作的意义，我返回的结果是填充数据列表，但我的问题是过滤项目

假设我正在输入中搜索“框”。键入“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>

---

在这里，您添加了建议，但从未清理过以前的建议。使用$'returnedProducts'启动成功回调。为空；应该会成功。

是的，成功了！这比我想象的要少，谢谢！干杯，伙计