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>`);

避免多次自动添加相同值的最佳方法？

1 个答案: