search/filter in javascript

Question

Sorry my english is not so good but I hope you will understand my problem. I made my data base with students names and other details, with all methods, post, get, delete and put. And its all working good. (I am new in programing,begginer, I dont know is it good way to do like I did it).

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

Now i have this code to draw my students in 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>'
    };

Now i have to make search/filter for my students, i tried to find answer but unsuccessful. My question is, how to make search filter, when I write first letter(and so on) it show me all names starting with that letter ? Thank you

you need some kind of backend

Dev Man
– Dev Man

2017-03-06 12:25:35 +00:00
Commented Mar 6, 2017 at 12:25 — Dev Man
– Dev Man, Commented Mar 6, 2017 at 12:25

Nikhil Goud · Accepted Answer · 2017-03-06 12:35:47Z

1

Add a text input on top of the list

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

then add this function in the script

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

source: https://www.w3schools.com/howto/howto_js_filter_lists.asp

answered Mar 6, 2017 at 12:35

Nikhil Goud

5841 gold badge7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ivan Over a year ago

it is working now.. i visit a lot that web site but could not solve my problem. now I get it. thanks

Melad Batta · Accepted Answer · 2017-03-06 12:25:16Z

0

you maybe could get some help from this working example!

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

answered Mar 6, 2017 at 12:25

Melad Batta

2161 gold badge5 silver badges14 bronze badges

Comments

Vikram Singh · Accepted Answer · 2017-03-06 12:25:37Z

0

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

answered Mar 6, 2017 at 12:25

Vikram Singh

9821 gold badge10 silver badges26 bronze badges

Collectives™ on Stack Overflow

search/filter in javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related