搜索功能中的空白输入输出不同

Question

我为搜索栏编写了一个小函数。目前，如果输入与数组中的任何内容都不匹配，函数将返回所述数组中的最后一个对象(我将其设为空(。我想更改它，这样如果输入为空，函数将返回"0"；无结果"；或者类似的东西。有什么想法为什么这个代码不能按预期工作吗？

let websitePages =
'{"website_pages":[' +
'{"name":"Hamza", "path":"/hamza/"},' +
'{"name":"Jakub", "path":"/jakub/"},' +
'{"name":"Kevin", "path":"/kevin/"},' +
'{"name":"Sreeja", "path":"/sreeja/"},' +
'{"name":"Tristan", "path":"/tristan/"},' +
'{"name":"Math", "path":"/math/"},' +
'{"name":"History", "path":"/history/"},' +
'{"name":"Science", "path":"/sci/"},' +
'{"name":"Literature", "path":"/lit/"},' +
'{"name":"Periodic Table", "path":"/periodictable/"},' +
'{"name":"API Collection", "path":"/api_collection/"},' +
'{"name":"CRUD", "path":"/crud/"},' +
'{"name":"Async CRUD", "path":"/crud_api/"},' +
'{"name":"Database Search", "path":"/crud/search/"},' +
'{"name":"Search (Database)", "path":"/crud/search/"},' +
'{"name":"", "path":"//"}]}'; // this object is empty in case the user inputs a blank, so that the previous result is removed and no link is returned
function SearchMain() {
list = JSON.parse(websitePages);
input = document.getElementById("SearchInput");
filter = input.value.toUpperCase(); // the user's input is changed to uppercase so that the search is not case-sensitive
for (i = 0; i < websitePages.length; i++) {
// this section goes through the items in my array and checks if the user's input is the same as any object name
if (
filter ===
list.website_pages[i].name.toUpperCase().substring(0, filter.length)
) {
//using substrings allows users to only input part of the page name instead of the whole thing
link = list.website_pages[i].path;
document.getElementById("searchResult").innerHTML =
list.website_pages[i].name;
document.getElementById("searchResult").href = link;
} else if (filter === null) {
document.getElementById("searchResult").innerHTML = "No Results";
document.getElementById("searchResult").href = "";
}
}
}

Answer 1

对于循环条件应该是i < list.website_pages.length，您还应该处理两个错误场景。一个是输入为空，搜索没有找到任何有效的匹配项。我已经在下面的小提琴中更新了它们。

工作Fiddle

let websitePages = '{"website_pages":[' +
'{"name":"Hamza", "path":"/hamza/"},' +
'{"name":"Jakub", "path":"/jakub/"},' +
'{"name":"Kevin", "path":"/kevin/"},' +
'{"name":"Sreeja", "path":"/sreeja/"},' +
'{"name":"Tristan", "path":"/tristan/"},' +
'{"name":"Math", "path":"/math/"},' +
'{"name":"History", "path":"/history/"},' +
'{"name":"Science", "path":"/sci/"},' +
'{"name":"Literature", "path":"/lit/"},' +
'{"name":"Periodic Table", "path":"/periodictable/"},' +
'{"name":"API Collection", "path":"/api_collection/"},' +
'{"name":"CRUD", "path":"/crud/"},' +
'{"name":"Async CRUD", "path":"/crud_api/"},' +
'{"name":"Database Search", "path":"/crud/search/"},' +
'{"name":"Search (Database)", "path":"/crud/search/"},' +
'{"name":"", "path":"//"}]}'; // this object is empty in case the user inputs a blank, so that the previous result is removed and no link is returned
function SearchMain() {
list = JSON.parse(websitePages);
input = document.getElementById('SearchInput');
filter = input.value.toUpperCase(); // the user's input is changed to uppercase so that the search is not case-sensitive
let isFound = false;
for (i = 0; i < list.website_pages.length; i++) { // this section goes through the items in my array and checks if the user's input is the same as any object name
if (filter === list.website_pages[i].name.toUpperCase().substring(0, filter.length)) { //using substrings allows users to only input part of the page name instead of the whole thing
link = list.website_pages[i].path;
document.getElementById('searchResult').innerHTML = list.website_pages[i].name;
document.getElementById('searchResult').href = link;
isFound = true;
}
}
if (!filter || !isFound) {
document.getElementById('searchResult').innerHTML = "No Results"
document.getElementById('searchResult').href = ""
}
}

<input type="text" id="SearchInput" />
<button onclick="SearchMain()">SearchMain</button>
<a id="searchResult"></a>

简化的解决方案

避免使用for循环，并使用Array.find从列表中查找匹配的节点。

工作Fiddle

let websitePages = '{"website_pages":[' +
'{"name":"Hamza", "path":"/hamza/"},' +
'{"name":"Jakub", "path":"/jakub/"},' +
'{"name":"Kevin", "path":"/kevin/"},' +
'{"name":"Sreeja", "path":"/sreeja/"},' +
'{"name":"Tristan", "path":"/tristan/"},' +
'{"name":"Math", "path":"/math/"},' +
'{"name":"History", "path":"/history/"},' +
'{"name":"Science", "path":"/sci/"},' +
'{"name":"Literature", "path":"/lit/"},' +
'{"name":"Periodic Table", "path":"/periodictable/"},' +
'{"name":"API Collection", "path":"/api_collection/"},' +
'{"name":"CRUD", "path":"/crud/"},' +
'{"name":"Async CRUD", "path":"/crud_api/"},' +
'{"name":"Database Search", "path":"/crud/search/"},' +
'{"name":"Search (Database)", "path":"/crud/search/"},' +
'{"name":"", "path":"//"}]}'; // this object is empty in case the user inputs a blank, so that the previous result is removed and no link is returned
function SearchMain() {
list = JSON.parse(websitePages);
input = document.getElementById('SearchInput');
filter = input.value.toUpperCase(); // the user's input is changed to uppercase so that the search is not case-sensitive
const matchingNode = filter ? list.website_pages.find(node => filter === node.name.toUpperCase().substring(0, filter.length)) : null;
if (matchingNode) {
document.getElementById('searchResult').innerHTML = matchingNode.name;
document.getElementById('searchResult').href = matchingNode.path;
}
else {
document.getElementById('searchResult').innerHTML = "No Results"
document.getElementById('searchResult').href = ""
}
}

<input type="text" id="SearchInput" />
<button onclick="SearchMain()">SearchMain</button>
<a id="searchResult"></a>