Live Search με τη JavaScript

Πάντα γούσταρα την αναζήτηση, ειδικά μετά από τότε που είδα το Spotlight στα Mac, το οποίο με έκανε να σιχαθώ για πάντα την αναζήτηση που είχαν τα XP.

Με τον καιρό διαβάζοντας από δω κι από εκεί και παρατηρώντας καλύτερα τα διάφορα site, είδα ότι πολλά έχουν αυτό το Live Search.

Σε αυτό το σημείο να διευκρινίσω κάτι:

Μιλάω για Live Search εδώ πέρα, όχι για Ajax Search. Υπάρχουν μερικές βασικές διαφορές μεταξύ αυτών των 2, κυρίως στη βασική ιδέα και, ως εκ τούτου, και στην υλοποίηση τις οποίες δεν θα αναφέρω εδώ, κυρίως επειδή βαριέμαι και κατά δεύτερον επειδή το Ajax Search θα το ανεβάσω στο μέλλον. 

Βασική ιδέα:

Τραβάμε όλα τα δεδομένα στα οποία θέλουμε να κάνουμε την αναζήτηση και τα αποθηκεύουμε σε ένα table ή σε list ή σε ό,τι θέλουμε/μας βολεύει.

Σε κάθε πλήκτρο που πατάει ο χρήστης καλούμε την συνάρτηση, η οποία πάει και ψάχνει το κάθε κελί ή το κάθε list item με ένα regular expression. Αν ταιριάζει καλώς, αν δεν ταιριάζει περνάει στο επόμενο κ.ο.κ

Στο παράδειγμα που θα γράψω εδώ, θα χρησιμοποιήσω ένα table το οποίο θα είναι μέσα σε ένα κρυφό div.

Κάθε γραμμή θα έχει 4 κελιά και η συνάρτηση θα κοιτάει και τα 4 κελιά. Μόλις βρει το ταίριασμα που θέλουμε σε οποιοδήποτε κελί θα εμφανίζει μόνο αυτή τη γραμμή και θα περνάει στην επόμενη, και πάει λέγοντας.

function search(query)
{
    if(query!="")
    {
  //αφαιρούμε whitespaces
        var query = query.trim(); 
  
  //δημιουργούμε τη regExp που χρησιμοποιήσουμε
        var pat = new RegExp(query+"+?.*", "gi");
  
  //παίρνουμε τον πίνακα
        var tbl = document.getElementById("data");
  
  //παίρνουμε τις γραμμές του
        var rowNumb = tbl.rows;
  
  //ξεκινάμε την επανάληψη από την 1η γραμμή του πίνακα
  //γιατί η γραμμή 0 είναι τα headers της κάθε στήλης.
  var i=1;
        for(i=1; i<rowNumb.length; i++)
        {
   //κάνουμε 'αόρατη' την γραμμή που είμαστε
            rowNumb[i].style.display='none';
   
   //παίρνουμε όλα τα κελιά της γραμμής
            var cellNumb = rowNumb[i].cells;
   
   //ξεκινάμε την επανάληψη για κάθε κελί
            var j=0;
            for(j=0; j<cellNumb.length; j++)
            {
    //παίρνουμε το κείμενο κάθε κελιού
                var cellText = cellNumb[j].innerHTML;
    
    //ελέγχουμε αν ταιριάζει με τη RegExp που δημιουργήσαμε πριν
                if(cellText.match(pat))
                {
     //αν ταιριάξει, τότε εμφανίζουμε το div που περιέχει τον πίνακα
                    document.getElementById('liveSearch').style.display='';
     
     //...και την γραμμή
                    rowNumb[i].style.display='';       
     
     //αφου βρέθηκε κάτι που ταιριάζει
     //δεν ψάχνουμε τα επόμενα κελιά
     //και περνάμε στην επόμενη γραμμή
                    break;
                }
            }
        }
    }
    else
    {
  //αν το πεδίο της αναζήτησης είναι κενό, τότε κρύβουμε το div του πίνακα
        document.getElementById('liveSearch').style.display='none';
    }    
}

Να σημειώσω εδώ ότι -όπως είναι προφανές- για να είναι άμεση η αναζήτηση, θα πρέπει η συνάρτηση να καλείται σε κάθε πάτημα πλήκτρου.

Επίσης το div μέσα στο οποίο βρίσκεται ο πίνακας είναι με id=livesearch και ο πίνακας με τα δεδομένα έχει id=data.