要素が同じテキストを持っている場合、2つの要素の1つを削除します。

Question

バニラjsで自動完成ウィジェットを作成しようとしています。とul要素がhtmlにあります。また、data-list属性をオートコンプリートに設定します。

基本的に、私のjsでは、私はデータリストを取得し、私は入力フィールドを入力するときにそれをフィルタリングします。

入力時に私はli要素を作成するので、入力時に同じテキストが繰り返されます。

だから、同じli要素を削除できますか？

JSFIDDLE

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