javascript - 搜索栏未显示或正在处理分页项目以显示学生

Question

我创建了一个学生列表并将他们显示在一个页面上，并带有该项目的相关分页按钮。我现在可以让学生和按钮正常工作，但我需要制作一个搜索栏并允许它过滤结果，但我无法让它工作。

我已经将 keyup 条目的事件监听器放在了 searchStudents 函数中，但我觉得我的条件语句是错误的？

JS代码：

//*****Extra credits attempt****** 
//Search form
//Create and append search bar with button
const appendSearchForm = () => {
  //declare variables for search bar
   const pageHeader = document.getElementsByClassName('page-header');
   const searchDiv = document.createElement('div');
   const searchInput = document.createElement('input');
   const searchBtn = document.createElement('button');
  //setup variables properties/values
   searchDiv.className = 'student-search';
   searchInput.setAttribute('placeholder','Search students here');
   searchBtn.textContent = 'search';
  
   //append search bar and button to DOM
   pageHeader[0].appendChild(searchDiv);
   searchDiv.appendChild(searchInput);
   searchDiv.appendChild(searchBtn);
}
  
//Search form function 
const searchStudents = list => {

   //put results in a new array
   let results = [];

   //make the student's name and search input upper case
   const firstName = list[i].name.first.toUpperCase();
   const lastName = list[i].name.last.toUpperCase();
   const inputText = searchInput.value.toUpperCase();

   //for loop to run through student array
   for (let i = 0; i < list.length; i++) {

      //If no results found, display No results message.
      if (results.length === 0 || !inputText) {
         //make new h2 element to put message
         const noResults = document.createElement('h2');
         //access textContent to display message
         noResults.textContent = `No results found for ${searchInput.value}`;
         //add a class value 
         noResults.classList.add('no-results');
         //append the message to page element
         document.getElementsByClassName('page')[0].appendChild(noResults);
         //add the buttons
         addPagination(results);
      } else {
       
       //if statement and includes method to check input value matches student names
        if (firstName.includes(inputText) || lastName.includes(inputText)) {
           //adds matches to end of results array
           results.push(list[i]);
        }
         //run the showPage function with results array passed in and buttons
           showPage(results, 1);
           addPagination(results);
        }
     }

   //Event listener for typing in search box, run search function (does not work with preventdefault)
   searchInput.addEventListener('keyup', () => {
      searchStudents(data);
   });

   //Event listener for clicking on button, run search function
   searchBtn.addEventListener('click', (event) => {
      event.preventDefault();
      searchStudents(data);
   });
}

//Call all functions
//appendSearchForm();
showPage(data, 1);
addPagination(data);

标签： javascriptfunctionsearchevent-handlingsearchbar