Eventi da tastiera su motore di ricerca JS

StarFish

Utente Attivo
7 Mar 2012
37
0
0
Ciao a tutti!!!
Ho una domanda. Ho uno script che mi permette di cercare ed evidenziare una parola all'interno di una pagina web. Ad esempio se cerco "Development", mi evidenzia tutte le occorrenze di "development" in questa pagina.

Vorrei creare 2 cose:

1. sottolineare un'occorrenza alla volta
2. spostarmi da un'occorrenza all'altra tramite tastiera.

Come si fa?

Vi lascio il mio codice:

Codice:
function eventoonloadbody () {

var body=document.getElementsByTagName('body')[0];
var buttons = '<button onclick="Search();">Search</button>';
body.innerHTML=buttons+body.innerHTML;

}

function Search(){
        var body=document.getElementsByTagName('body')[0];
        search_item (body);
}



function search_item (node) {

var cible="development";
    if (node.nodeType == 3) {
        
                var parent_node =node.parentNode;
                var content_node = node.nodeValue;
                var pos_node = content_node.indexOf(cible);

                while (pos_node >=0) { 
           
                        var left= content_node.substr(0,pos_node);
                        var right= content_node.substr(pos_node+cible.length);
                        var span= document.createElement('span');
                        var start= document.createTextNode(left);
                
                        var word=document.createTextNode(cible);
                        span.appendChild(word);
                        parent_node.insertBefore(start,node);
                        parent_node.insertBefore(span,node);
                        
                        content_node= right;
                        pos_node = content_node.indexOf(cible);
                        
                
                         span.style.backgroundColor='#CDDE47';
                         span.style.color='#E8582E';
                }
        
                var end = document.createTextNode(content_node);
                parent_node.insertBefore(end,node);
                node.remove();
        
    } else {
        
                var children = node.childNodes;
                var child = new Array();
                for (var i = 0; i<children.length; i++) {
                
                        child[i] = children[i];
                }
                for (var i = 0; i < child.length; i++) {
                
                        search_item(child[i]);
                }        
    }
}
 
Metti tutte le corrispondenze dentro un array associativo ,

con la funzione onKeyPress ( google it! ) ti muovi in maniera sequenziale dentro ognuna ricorrenza sfruttando il doppio parametro dell'array associativo!

se sei arrivato a fare quel codice sei in gamba e non ti ci vuole molto ;)
 

Discussioni simili