Entfernen eines von zwei Elementen, wenn Elemente denselben Text haben

Question

Ich versuche, ein Autocomplete-Widget in Vanille js.I habe ein input und ein ul Element in meinem html.Auch gesetzt data-list Attribut für Autocomplete.

Grundsätzlich, in meinem js, bekomme ich Daten-Liste und filter es, wenn ich das Eingabefeld eintippe.

Da ich li Element in meinem js bei der Eingabe erstellen, habe ich denselben Text wieder, wenn ich tippe.

Also, kann ich das selbe li Element entfernen?

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

Jedesmal, wenn man Sie die alte Liste löschen zu suchen haben. Also, fügen Sie einfach

an den Anfang der Funktion und Sie sind fertig. Hier :

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/