如何使用 javascript 或 jquery 从 HTML 中的数据列表中删除重复选项？答案

【问题标题】：How to remove duplicates options from the datalist in HTML using javascript or jquery?如何使用 javascript 或 jquery 从 HTML 中的数据列表中删除重复选项？
【发布时间】：2021-05-06 16:05:27
【问题描述】：

我正在研究一个搜索框，我在其中使用 Flask、MySQL 和 Ajax 在编写任何查询时获取搜索建议。当我开始在搜索框中写入内容时，我收到了来自 ajax 回调的响应，并且我正在附加新选项，该选项会生成大量重复选项，因为建议在另一个响应中可能相似，所以我想删除它。

这里是重复选项问题

（在右侧，您可以看到控制台中显示的重复选项）-

这是我的 Ajax -

<script>
    $(document).ready(function(){
        $("#searchbox").on("input", function(e){
            searchtext = $("#searchbox").val();
            
            $.ajax({
                method:"post",
                url:"/searchengine",
            
                data:{text:searchtext},
                success:function(res){
                
                    $.each(res,function(index,value){
                         options =  "<option value="+value.address+">";
                            console.log(options)
                    });
                    $('#results').append(options);
             
                                }
            })

        
                        
            
        });
    })
</script>

您能告诉我如何从 HTML 的数据列表中删除这些重复值提前致谢！

【问题讨论】：

您在每个循环中都覆盖options。您正在执行options="a" 然后options="b" 然后option="c" 等等。无论有多少循环，在循环之后，options 的值将始终是最后一个（在本例中为“Dhar”）。

标签： javascript html jquery json ajax

【解决方案1】：

我建议您不仅要添加新值，还要形成新的选项列表并用它替换旧的。所以，不要使用$('#results').append(options)，而是使用$('#results').empty().append(options)。这样，您将只有新选项而没有重复项（除非您的数据中有一些选项）。

【讨论】：