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

Question

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

用户类型：“d” 数据列表：<option value = "dog">

用户类型：“做” 数据列表：<option value = "dog"> <option value = "dog">

用户类型：“狗” 数据列表：<option value = "dog"> <option value = "dog"> <option value = "dog">

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

当前 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>`);
          });
        });
      };
    };
  });
});

Answer 1

在将元素添加到 DOM 之前，您可以简单地检查元素是否存在：

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