Question

我正在尝试在vanilla js中创建一个自动完成小部件。我的html中有一个input和一个ul元素。还为自动完成设置data-list属性。

基本上，在我的js中，我获取数据列表并在输入输入字段时对其进行过滤。

因为我在输入时在我的js中创建了li元素，所以当我输入时，我会再次使用相同的文本。

那么，我可以删除相同的li元素吗？

HTML：

<input class="input" type="text" data-list="black,white,red"/>
<ul class="list"></ul>

JS：

var input = document.querySelector(".input");
var list = document.querySelector(".list");

// Made data list array
var data_list = input.getAttribute("data-list");
data_list = data_list.split(",");

var typing_arr = [];
input.addEventListener("keyup", function(e) {
  var typing = data_list;

  // Filter data-list array 
  typing = typing.filter(function(item) {
    return item.toLowerCase().search(e.target.value.toLowerCase()) != -1;
  });

  typing_arr = typing;

  // Show data-list according to filter
  typing_arr.map(function(list_item) {
    var li = document.createElement("li");
    list.appendChild(li);
    li.innerHTML = list_item;

    //Remove same elements from list
    if (list.children.length > typing.length) {
      console.log("Remove the same!")
    }

  });

});

Answer 1

每次搜索时都必须清除旧列表。所以，只需添加

list.innerHTML = '';

到函数的开始，你就完成了。这里：

var input = document.querySelector(".input");
var list = document.querySelector(".list");

// Made data list array
var data_list = input.getAttribute("data-list");
data_list = data_list.split(",");

var typing_arr = [];
input.addEventListener("keyup", function(e) {
  list.innerHTML = '';  //CHANGE
  var typing = data_list;

  // Filter data-list array 
  typing = typing.filter(function(item) {
    return item.toLowerCase().search(e.target.value.toLowerCase()) != -1;
  });

  typing_arr = typing;

  // Show data-list according to filter
  typing_arr.map(function(list_item) {
    var li = document.createElement("li");
    list.appendChild(li);
    li.innerHTML = list_item;

    //Remove same elements from list
    if (list.children.length > typing.length) {
      console.log("Remove the same!")
    }

  });

});

JSFiddle：<IndexRedirect>

如果元素具有相同的文本，请删除两个元素之一

1 个答案: