Different output for blank input in search function

Question

I've written a small function for a search bar. Currently if the input doesn't match anything in my array, the function returns the last object in said array (which i made to be empty). I want to change it so that if the input is blank, the function returns "No Result" or something like that. Any ideas why this code isn't working as intended?

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

For loop condition should be i < list.website_pages.length, also you should handle two error scenarios. One is input is empty and the search didnot find any valid match. I have updated them in the below fiddle.

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

Simplified solution.

Avoid using for loop and make use of Array.find to find the matching node from the list.

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