在javascript中搜索/過濾

Question

對不起，我的英語不太好，但我希望你能理解我的問題。 我使用所有方法，發佈，獲取，刪除和放置，使我的數據庫中包含學生姓名和其他詳細信息。它的所有工作都很好。 （我是編程新手，begginer，我不知道是否像我這樣做的好方法）。

IME =名稱// prezime =姓氏

var studentiDataStore = { 
     studenti: [], 
     postStudent: function(studijId, ime, prezime, brIndexa){ 
      this.studenti.push({ 
       id:this.studenti.length, 
       studijId: studijId, 
       ime: ime, 
       prezime: prezime, 
       brIndexa: brIndexa 
      }); 
      return this.studenti[this.studenti.length-1]; 
     }, 
     getStudent: function(id){ 
      if(id){ 
       var targetIndex = -1; 
       for(var i=0; i<this.studenti.length; i++){ 
        if(this.studenti[i].id===id){ 
         targetIndex = i; 
         break; 
        } 
       } 
       if(targetIndex>-1){ 
        return this.studenti[targetIndex]; 
       } else { 
        return null; 
       } 
      } else { 
       return this.studenti; 
      } 
     } 
    }, 

現在我有這樣的代碼來繪製我的學生在HTML中

var displayStudents = function(){ 
     var studenti = studentiDataStore.getStudent(); 
     var htmlPresentation = []; 
     for(var i=0; i<studenti.length; i++){ 
      htmlPresentation.push('<li class="list-group-item">'+ studenti[i].ime + " " + studenti[i].prezime+'</li>'); 
     } 
     document.getElementById("mainContent").innerHTML = '<ul class="list-group">'+ htmlPresentation.join(" ") + '</ul>' 
    }; 

現在我不得不讓搜索/過濾器爲我的學生，我試圖找到答案但不成功。 我的問題是，如何使搜索過濾器，當我寫第一個字母（等等）它顯示我的所有名稱以該字母開頭？謝謝

Answer 1

添加一個文本輸入在列表的頂部

<input type="text" id="searchInput" onkeyup="searchFilter()" placeholder="Search for names.."> 

然後在腳本中添加此功能

function searchFilter() { 
    // Declare variables 
    var input, filter, ul, li, a, i; 
    input = document.getElementById('searchInput'); 
    filter = input.value.toUpperCase(); 
    ul = document.getElementsByClassName("list-group")[0]; 
    li = ul.getElementsByTagName('li'); 

    // Loop through all list items, and hide those who don't match the search query 
    for (i = 0; i < li.length; i++) {    
     if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) { 
      li[i].style.display = ""; 
     } else { 
      li[i].style.display = "none"; 
     } 
    } 
} 

來源：https://www.w3schools.com/howto/howto_js_filter_lists.asp

Answer 2

你也許可以從這個工作示例中得到一些幫助！

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table

Answer 3

var displayStudents = function(){ 
     var studenti = studentiDataStore.getStudent(); 
     var htmlPresentation = []; 
     for(var i=0; i<studenti.length; i++){ 
      if((studenti[i].ime+" "+studenti[i].prezime).startsWith("youname")) 
      htmlPresentation.push('<li class="list-group-item">'+ studenti[i].ime + " " + studenti[i].prezime+'</li>'); 
     } 
     document.getElementById("mainContent").innerHTML = '<ul class="list-group">'+ htmlPresentation.join(" ") + '</ul>' 
    };