Javascript 避免自动完成下拉列表多次追加相同值的最佳方法？

我有一个搜索表单，它有一些ajax，在用户输入时查询数据库，并在数据列表中列出类似的结果。我遇到的问题是，作为一个用户，它会不断地追加一个已经找到的匹配项。举例说明：

用户类型：“d” 数据列表：

用户类型：“do” 数据列表：

用户类型：“狗” 数据列表：

我解决了这个问题，在重新添加当前匹配项之前，清空每个键启动事件上的现有数据列表。它可以工作，只是当您键入时，它会导致结果在数据列表中闪烁，因为它会在数据列表中有选项、没有选项和再次有选项之间不断切换。处理这种情况的更好方法是什么

当前JS：

$(document).ready(function() {
  $(window).on('load', function(){
    var search_input = $("#listing-search-bar")

    if (search_input) {
     search_input.keyup(function(e){
      autocomplete(e);
     });
    };

    function autocomplete(el) {
      var input = el.target;
      var min_chars = 0;
      if (input.value.length > min_chars) {
        $.ajax({
          type: 'GET',
          url: "/listings/search",
          data: {"query" : input.value},
          dataType: "json"
        }).done(function(response) {
          // Delete existing results to prevent same result appending multiple times
          $("#cities").empty();
          response.forEach( function(city) {
            // Append all matching cities to drop down
            $("#cities").append(`<option value="${city}"></option>`);
          });
        });
      };
    };
  });
});

$（文档）.ready（函数（）{
$（窗口）.on（'load'，function（）{
var search_input=$（“#列表搜索栏”）
如果（搜索输入）{
搜索输入键（功能（e）{
自动完成（e）；
});
};
函数自动完成（el）{
var输入=el.target；
var min_chars=0；
if（input.value.length>min_chars）{
$.ajax({
键入：“GET”，
url:“/listings/search”，
数据：{“查询”：input.value}，
数据类型：“json”
}).完成（功能（响应）{
//删除现有结果以防止同一结果多次追加
$（“#城市”）.empty（）；
答复：forEach（职能（城市）{
//将所有匹配的城市追加到下拉列表中
$（“#城市”）。追加（``）；
});
});
};
};
});
});

在将元素添加到DOM之前，只需检查元素是否存在：

if ( !$('#cities option[value="'+city+'"]').length )
    $("#cities").append(`<option value="${city}"></option>`);

if（！$（“#城市选项[value=“”+city+”）.length）
$（“#城市”）。追加（``）；

这很有效！我以前从未使用过这样的jQuery选择器。容易解决