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]);
                }        
    }
}
 

mariosantella.com

Nuovo Utente
8 Mar 2014
24
1
3
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
Autore Titolo Forum Risposte Data
C Cross-browser, problemi con la gestione degli eventi da tastiera Javascript 0
A [CERCO] Articolista per siti a tema eventi e feste private Offerte e Richieste di Lavoro e/o Collaborazione 0
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
D sviluppo app eventi + libri Sviluppo app per Android 0
StephenSoftware [ASP.Net] Pagina Master ed eventi... ASP.NET 0
Domenico_Falco1 Associare una stessa funzione get a due eventi a.click con classi differenti Ajax 6
TpD [PHP] Script per organizzazione presenza eventi PHP 3
Jonn [WordPress] Gestione categorie e tags per sito eventi WordPress 2
M [javascript] Aggiungere eventi al caricamento Javascript 0
filograndipad2 Esempi chiari e completi sul funzionamento degli eventi in Java Java 1
G Fullcalendar: modificare colore testo, backgroup e bordi per tutti gli eventi jQuery 3
B [Javascript] Cambiare classe ed aggiornare relativi eventi Javascript 3
E Vendo gruppo facebook MILANO EVENTI Annunci servizi di Social Media Marketing 0
Vanessa234 [COMPRO] Cerco sito eventi e matrimonio Compravendita siti e domini 0
Rhisen [PHP] Problema Calendario Eventi PHP 0
B gestione eventi con addEventListener,comportamento strano dell'handle Javascript 2
A Eventi su select un dramma... jQuery 0
M funzioni e gestori di eventi Javascript 1
E Sito eventi Presentati al Forum 0
E problema per Sito per eventi e sagre Leggi, Normative e Fisco 0
I Vendo 32.000 Inviti a mettere mi piace alle pagine/Invito Eventi Annunci servizi di Social Media Marketing 0
J. Owlsteam Eventi mouse: come risalire all'indice dell'elemento cliccato? Java 1
D [AS3] Problema con eventi Flash 0
L Google Calendar sul proprio sito: è possibile inserire eventi? Javascript 1
M eventi in javascript Javascript 1
M [Offro Lavoro] Realizzazione di un database per inserimento eventi in aspx o php [Retribuito] Offerte e Richieste di Lavoro e/o Collaborazione 1
M Come creare un database per eventi esportabile su feed rss Classic ASP 0
D Eventi: si possono modificare proprietà css di un el. B tramite un hover su un el. A? HTML e CSS 0
helpdesk Gif agli eventi di php Upload PHP 6
F Agenda Eventi da database MySql MySQL 3
WpStyle BorderRock - Eventi musicali Presenta il tuo Sito 5
S info sviluppo siti di eventi Presenta il tuo Sito 1
K Cerco script php gestione eventi con tasti PHP 6
P Gestione Eventi in Java, architettura UNO per OpenOffice Java 0
F Csm per creazione sito catalogo per location eventi CMS (Content Management System) 1
R [VENDO] Più di 27.000 Suggerimenti di pagine fan/gruppi/eventi/prodotti su facebook Annunci servizi di Social Media Marketing 0
@ Calendario eventi asp e db Classic ASP 2
A Nasce Clappo: occasioni ed eventi geolocalizzati Presenta il tuo Sito 2
M [PHP] calendario con eventi problema con date PHP 9
voldemort Script calendario eventi ASP.Net ASP.NET 1
emanuelevt eventi e nuovi broswer - danno problemi? Javascript 2
D Esistono eventi per i moduli non di classe? Visual Basic 0
A Calendario eventi in php... dove trovarlo? Cosa consiglia il forum? PHP 6
G Calendario con eventi PHP 7
D [jquery] gestire eventi ajaxStart e ajaxStop e richieste in coda jQuery 1
neo996sps Calendario da abbinare ad eventi PHP 2
S calendario eventi PHP 0
T gestire eventi in textfield Programmazione 1
P visulaizzare eventi con una funzione in javascript Javascript 0
I Calendario con eventi PHP 4

Discussioni simili