Ajax搜索無法正常工作

Question

我正在XML文件中搜索某些包含輸入字段中子字符串的項。 搜索首先開始起作用，但是如果我刪除輸入並再次寫東西，它將不再起作用。 我為找到的每個項目創建一個表格行，因為以后需要使用它們。 如果項目不再與搜索輸入匹配，我還將從表中刪除一行。 順便說一句，我知道從XML讀取這樣的內容在CHROME中不起作用，但是我正在使用Firefox進行檢查。

我的劇本：

<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部分：

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

XML檔案：

<?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>

謝謝。

Answer 1

當str的長度為零時，您必須清除Set。

添加'inTable.clear（）;'

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