我可以使用XMLHttpRequest制作搜索栏吗？

Question

[嗨，我正在搜索栏上工作，我希望搜索框使用XMLHttpRequest（）来显示各个页面的p，li和h3元素？以及如何？

我将所有这些元素都转换为数组，但是我不知道如何确保该数组显示在搜索框中，以便用户可以单击并重定向到该元素的页面。

我正在尝试学习JavaScript，所以请仅使用普通javascript。

谢谢您的时间，希望这是有道理的。

const search = document.getElementById("myInput");
const list = document.getElementById("list");
const sections = document.querySelectorAll("li, h3, p");
const filter = Array.prototype.filter;

function setlist(group) {
  for (const item of group) {
    const it = document.createElement("li");
    const text = document.createTextNode(item.name);
    it.appendChild(text);
    list.appendChild(it);
  }
  if (group.length === 0) {}
}

function clearList() {
  while (list.firstChild) {
    list.removeChild(list.firstChild);
  }
}

function setNoResults() {
  const it = document.createElement("li");
  it.classList.add("list-group-item");
  const text = document.createTextNode("no results found");
  it.appendChild(text);
  list.appendChild(it);
}

function getRelevancy(value, searchTerm) {
  if (value === searchTerm) {
    return 2;
  } else if (value.startWith(searchTerm)) {
    return 1;
  } else if (value.includes(searchTerm)) {
    return 0;
  } else {
    return -1;
  }
}

search.addEventListener("input", event => {
  let value = event.target.value;
  if (value && value.length > 0) {
    value = value.toLowerCase();
    setlist(
      sections
      .filter(item => {
        return item.name.includes(value);
      })
      .sort((itemA, itemB) => {
        return (
          getRelevancy(itemB.name, value) - getRelevancy(itemA.name, value)
        );
      })
    );
  } else {
    clearList();
  }
});

<div class="navbar">
  <ul class="navSection">
    <li class="collection-item">
      <a href="#Headphones"></a>Speakers</li>
    <li class="collection-item"><a href="#Headphones">Headphones</a></li>
    <li class="collection-item"><a href="#Accessories">Accessories</a></li>
    <li class="collection-item"><a href="#Earphones">Earphones</a></li>
    <li class="collection-item"><a href="#all">All</a></li>
  </ul>
</div>
<div class="basketSearch">
  <div class="searchBar">
    <input type="text" name="search" value="" autocomplete="off" id="myInput" placeholder="" />
  </div>
  <ul class="listGroup" id="list"></ul>

Answer 1

您应该拥有一个包含数据的数据库，或者使用API​​来获取一些数据。第二个选项是在本地拥有一个将包含数据的JSON文件。

    let request = new XMLHttpRequest();
    request.open('GET', 'URL*', true);

    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
            let data = JSON.parse(request.responseText)
        }
    };
    request.send(null);

 - Example of data -
 [
  {name: 'something', ...othervalues},
 ]

 OR

 ['something', 'item1', 'item2', ...]

* URL = php文件或API的路径。

之后您可以使用您的

search.addEventListener("input", event => {...})筛选数据数组结果。请记住，Ajax请求具有异步性质，因此您必须正确处理它们。您可能会考虑使用异步功能或诺言。否则，如果在设置结果之前触发输入事件，则数据将为undefined。另一种方法是在ajax请求完成后设置您的search.addEventListener("input", event => {...})

 request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
            let data = JSON.parse(request.responseText);
            search.addEventListener("input", event => {...})
        }
    };

因此您可以直接访问数据变量。建议下拉菜单的另一个选项是HTML Datalists。

欢呼声。