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

在这里您要添加建议，但是您永远不会清除之前的建议。使用success启动$('#returnedProducts').empty();回调应该可以解决问题（link to .empty() doc）。

ajax调用/响应，自动完成的附加值正在添加但未过滤

1 个答案: