Question

抱歉，我的英语不太好，但我希望你能理解我的问题。我用学生姓名和其他细节制作了我的数据库，包括所有方法，发布，获取，删除和放置。一切顺利。（我是编程新手，初学者，我不知道这样做的好方法就像我做的那样）。

ime = name // prezime = lastname

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>'
    };

在javascript中搜索/过滤

3 个答案: