我可以用 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 文件的路径，或 url 到 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 。

干杯。