删除两个元素之一，如果元素具有

我试图在香草js.I的自动完成构件相同的文字有input，在我html.Also一个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!") 
    } 

    }); 

});

来源

2017-02-17 Norx

我不明白你的思维方式，你为什么需要这样的代码？如果你点击，例如'backspace'按钮，您将添加3个新的'li'元素到列表中。但为什么？ –

用于自动完成的目的@Kinduser – Norx

你想实现什么？你想过滤所有重复元素的列表？所以总是只有3个“li”项目具有不同的值？ –

每当你搜索，你必须清除旧名单。所以，只需加上

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：https://jsfiddle.net/1Lvck9cn/3/

来源

2017-02-17 20:52:30

删除两个元素之一，如果元素具有

回答

相关问题