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

Question

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

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

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

用户类型："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>`);

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

Best way to avoid auto-complete drop down from appending same value multiple times?

javascript

ajax

autocomplete

html-datalist