我可以使用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的URL。

之后，您可以使用

search.addEventListener("input", event => {...})以过滤数据数组结果。请记住，Ajax请求具有异步性质，必须正确处理它们。您可以考虑使用异步函数或promise。否则，如果在设置结果之前激发输入事件，则数据将为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数据列表。

干杯。