Ajax Suche funktioniert nicht richtig

Question

Ich suche in einer XML-Datei nach bestimmten Elementen, die den Teilstring enthalten, der sich im Eingabefeld befindet. Die Suche funktioniert zunächst, aber wenn ich die Eingabe lösche und Dinge wieder schreibe, funktioniert das nicht mehr. Ich erstelle für jedes gefundene Element eine Tabellenzeile, weil ich sie später verwenden muss. Ich lösche auch eine Zeile aus der Tabelle, wenn das Element nicht mehr mit der Sucheingabe übereinstimmt. Übrigens, ich weiß, dass das Lesen aus einem XML in CHROME nicht funktioniert, aber ich benutze Firefox, um das zu überprüfen.

Mein Skript:

<script> 
    var inTable = new Set(); 

    function showResult(str) { 
    if (str.length == 0) { 
     document.getElementById("livesearch").innerHTML = ""; 
     document.getElementById("livesearch").style.border = "0px"; 
     return; 
    } 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
     myFunction(xhttp, str); 
     } 
    }; 
    xhttp.open("GET", "Menu.xml", true); 
    xhttp.send(); 
    } 

    function myFunction(xml, str) { 
    var tbody = document.getElementById('livesearch'); 
    var i; 
    var xmlDoc = xml.responseXML; 
    var x = xmlDoc.getElementsByTagName("ITEM"); 
    for (i = 0; i < x.length; i++) { 
     a = x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue.toString(); 
     if (a.toLowerCase().indexOf(str) != -1) { 
     if (inTable.has(a) == false) { 
      console.log("add to table"); 
      inTable.add(a); 
      var tr = document.createElement('tr'); 
      tr.setAttribute('name', a); 
      var td = document.createElement('td'); 
      td.innerHTML = x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue; 
      tr.appendChild(td); 
      td = document.createElement('td'); 
      td.innerHTML = x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue; 
      tr.appendChild(td); 
      td = document.createElement('td'); 
      td.innerHTML = x[i].getElementsByTagName("DESC")[0].childNodes[0].nodeValue; 
      tr.appendChild(td); 
      tr.setAttribute('onclick', 'changeSomething();'); 
      tbody.appendChild(tr); 
     } else console.log("it exists in table"); 
     } else if (inTable.has(a) == true) { 
     console.log("deletes from table"); 
     inTable.delete(a); 
     var y = document.getElementsByName(a)[0]; 
     tbody.deleteRow(y.rowIndex); 
     } 
    } 
    } 
    changeSomething = function() { 
    document.getElementById('demo').style.visibility = 'hidden'; 
    } 

</script> 

HTML-Teil:

<form> 
    <input type="text" size="30" onkeyup="showResult(this.value)"> 
    <table id="livesearch"></table> 
    <div id="demo"></div> 
</form> 

XML-Datei:

<?xml version="1.0" encoding="ISO-8859-1"?> 
<MENU> 
    <ITEM> 
     <NAME>CARTOFI PRAJITI</NAME> 
     <PRICE>6 LEI</PRICE> 
     <DESC>300 g</DESC> 
    </ITEM> 
    <ITEM> 
     <NAME>PASTRAV INVELIT IN SUNCA AFUMATA</NAME> 
     <PRICE>43 lei</PRICE> 
     <DESC>Pastrav</DESC> 
    </ITEM> 

</MENU> 

Dank.

Answer 1

Sie müssen zurücksetzen, wenn die Länge von str null ist.

hinzufügen 'inTable.clear();'

if (str.length == 0) { 
    document.getElementById("livesearch").innerHTML = ""; 
    document.getElementById("livesearch").style.border = "0px"; 
    inTable.clear(); 
    return; 
}