javascript - 在 JavaScript 中搜索/过滤

Question

抱歉，我的英语不太好，但我希望你能理解我的问题。我用学生姓名和其他详细信息创建了数据库，并使用所有方法，发布、获取、删除和放置。而且一切都运转良好。 (我是编程新手，初学者，我不知道像我这样做是不是好方法)。

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