Cerca parola

Cosina

Utente Attivo
27 Dic 2016
101
0
16
Buongiorno a tutti, ho trovato questo codice che permette di cercare e colorare una parola (o più uguali) nel testo contenuto in un div specifico. Vorrei che le parole non si colorassero digitandole, ma solo dopo aver cliccato su un pulsante come in questa immagine:
search.png


Non so modificare il codice per ottenere questo risultato. Potete aiutarmi per piacere? Grazie mille.

p.s. scusate, aggiungo: se possibile, vorrei anche che la pagina scrollasse fino alla prima parola trovata, al momento del click, se questa si trova al di sotto della zona visibile.

Ecco il codice che ho trovato:

Codice:
<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>modal_search</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <style>
            .highlight{color:red}
        </style>
      
    </head>
    <body>

        <input class=modal_search id=x>

        <div id=textModal_x>
            <p>
                I am trying to <b>Search</b> a &lt;text&gt; and <i>highlight</i> it & inside an HTML element.
            </p>
            <p>
                But it is not working properly. Just first character of searched text is highlighted.
            </p>
        </div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script>
        $(function() {
            $(".modal_search").each(function() {
                var textModal = $('#textModal_' + this.id),
                    html = textModal.html();
                $(this).on("keyup", function() {
                    var reg = new RegExp($(this).val() || "&fakeEntity;", 'gi');
                    textModal.html(html.replace(reg, function(str, index) {
                        var t = html.slice(0, index+1),
                            lastLt = t.lastIndexOf("<"),
                            lastGt = t.lastIndexOf(">"),
                            lastAmp = t.lastIndexOf("&"),
                            lastSemi = t.lastIndexOf(";");
                        //console.log(index, t, lastLt, lastGt, lastAmp, lastSemi);
                        if(lastLt > lastGt) return str; // inside a tag
                        if(lastAmp > lastSemi) return str; // inside an entity
                        return "<span class='highlight'>" + str + "</span>";
                    }));
                });
            })

        })
        </script>
      
    </body>
    </html>
 
Ultima modifica:

Tommy03

Utente Attivo
6 Giu 2018
616
58
28
20
Vicenza
Beh per trovare la parola al click e non mentre digiti credo che basti sostituire questo:
HTML:
$(this).on("keyup", function() {
con questo:
HTML:
$(".bottone_submit").cllick(function() {
(dove bottone_submit è la classe del bottone che devi schiacciare)

Per quanto riguarda lo scroll fino al punto specifico non saprei... prova a dare un'occhiata alla funzione .scrollTo()
 

Cosina

Utente Attivo
27 Dic 2016
101
0
16
Grazie, ho provato, ma non funziona. Probabilmente sbaglio io qualcosa. Potresti farmi vedere anche come configurare il bottone nello specifico?
 

Tommy03

Utente Attivo
6 Giu 2018
616
58
28
20
Vicenza
Nell'immagine che avevi mandato c'era un bottone search, dov'è nel codice html? Comunque, il bottone lo puoi mettere anche come div, tipo cosi:
HTML:
<input class=modal_search id=x>
<div class='cerca'>search</div>
e poi nel codice jQuery, al posto di:
HTML:
$(this).on("keyup", function() {
metti:
HTML:
$(".cerca").click(function() {
 

Cosina

Utente Attivo
27 Dic 2016
101
0
16
Il bottone era un'immagine proprio perchè non sapevo implementarlo. Grazie, comunque. Ho provato a fare esattamente come mi hai detto, ma non funziona. Resto in attesa di altri consigli, anche per lo scroll. Gentilissimo, ti auguro buona serata. Ciao
 

Tommy03

Utente Attivo
6 Giu 2018
616
58
28
20
Vicenza
Mm.. Ho provato a modificare così e funziona (si evidenzia quando clicchi sul bottone):
HTML:
<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>modal_search</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <style>

            .highlight{color:red}
        </style>
     
    </head>
    <body>

        <input class=modal_search id=x><button class=search>search</button>

        <div id=textModal_x>
            <p>
                I am trying to <b>Search</b> a &lt;text&gt; and <i>highlight</i> it & inside an HTML element.
            </p>
            <p>
                But it is not working properly. Just first character of searched text is highlighted.
            </p>
        </div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script>
        $(function() {
$(".modal_search").each(function() {
                var textModal = $('#textModal_' + this.id),
                    html = textModal.html();
                $(".search").click(function() {
                    var reg = new RegExp($(".modal_search").val() || "&fakeEntity;", 'gi');
                    textModal.html(html.replace(reg, function(str, index) {
                        var t = html.slice(0, index+1),
                            lastLt = t.lastIndexOf("<"),
                            lastGt = t.lastIndexOf(">"),
                            lastAmp = t.lastIndexOf("&"),
                            lastSemi = t.lastIndexOf(";");
                        //console.log(index, t, lastLt, lastGt, lastAmp, lastSemi);
                        if(lastLt > lastGt) return str; // inside a tag
                        if(lastAmp > lastSemi) return str; // inside an entity
                        return "<span class='highlight'>" + str + "</span>";
                    }));
                });
})
        })
        </script>
     
    </body>
    </html>

Per lo scroll però proprio non saprei... prova a leggere qui se ti è utile
 
  • Like
Reactions: Cosina

Cosina

Utente Attivo
27 Dic 2016
101
0
16
Grazie mille Tommy03, funziona perfettamente. La prima parte è risolta, vediamo se qualcuno mi risolve la seconda. Ciao :)
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
vediamo se qualcuno mi risolve la seconda
Ciao, si può fare in vari modi. Una soluzione può essere l'uso della funzione nativa scrollIntoView().

Prova in questo modo, aggiungendo la parte di script nella riga dopo il return, dopo le 3 parentesi chiuse:
JavaScript:
    return "<span class='highlight'>" + str + "</span>";
})).find(".highlight").get(0).scrollIntoView({behavior: "smooth"});
Fai sapere.
 

Cosina

Utente Attivo
27 Dic 2016
101
0
16
Ciao, si può fare in vari modi. Una soluzione può essere l'uso della funzione nativa scrollIntoView().

Prova in questo modo, aggiungendo la parte di script nella riga dopo il return, dopo le 3 parentesi chiuse:
JavaScript:
    return "<span class='highlight'>" + str + "</span>";
})).find(".highlight").get(0).scrollIntoView({behavior: "smooth"});
Fai sapere.

Perfetto, funziona! Grazie mille WmbertSea, grazie a tutti. Buon weekend. Ciao
 

Cosina

Utente Attivo
27 Dic 2016
101
0
16
Ehm....approfitto ancora (chiedo perdono) per un'ultima domanda: sarebbe possibile far uscire un avviso quando una voce della ricerca non viene trovata? Un semplice "not found". Senza fretta, se e quando hai (avete) tempo. Mille, mille, mille grazie. Ciao :)
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
Prova così, sostituendo la relativa parte di script con questo :
JavaScript:
$(".modal_search").each(function() {
    var textModal = $('#textModal_' + this.id),
        html = textModal.html();
    $(".search").click(function() {
        var reg = new RegExp($(".modal_search").val() || "&fakeEntity;", 'gi');
        var $matches = textModal.html(html.replace(reg, function(str, index) {
            var t = html.slice(0, index+1),
                lastLt = t.lastIndexOf("<"),
                lastGt = t.lastIndexOf(">"),
                lastAmp = t.lastIndexOf("&"),
                lastSemi = t.lastIndexOf(";");
            //console.log(index, t, lastLt, lastGt, lastAmp, lastSemi);
            if(lastLt > lastGt) return str; // inside a tag
            if(lastAmp > lastSemi) return str; // inside an entity
            return "<span class='highlight'>" + str + "</span>";
        })).find("span.highlight");
       
        if ($matches.length) $matches.get(0).scrollIntoView({behavior: "smooth"});
        else alert("not found");
    });
})

In sostanza ho definito una variabile ($matches) che restituisce un oggetto jQuery contenente gli eventuali span con classe highlight, cioè le effettive occorrenze trovate. La condizione alla fine dello script ($matches.length) verifica se sono state trovate delle occorrenze, quindi effettua lo scroll, altrimenti visualizza l'alert col messaggio.

Chiaramente l'alert si potrebbe sostituire con un testo che appaia direttamente sulla pagina, ad esempio inserendolo dentro un apposito span o come pare meglio a te.

Fai sapere.
 
Discussioni simili
Autore Titolo Forum Risposte Data
I cerca file sottocartella unlink file PHP 0
D Esercizi in cerca d'autore... Presentati al Forum 1
L php mysql cerca e visualizza pagina PHP 0
I Cerca: blogger IT per articoli di prova Offerte e Richieste di Lavoro e/o Collaborazione 0
Alex_70 Cerca testo all'interno di una stringa PHP 5
Shyson Inserire placeholder nel campo cerca PHP 5
F [PHP] creare tabella e tasto cerca PHP 3
D [ASP] Autocomplete cerca su 2 campi del db Classic ASP 1
M [PHP] Cerca file in una specifica cartella sul sito PHP 0
grgfede [Gratuito][Cerco] Forum su tecnologia cerca staff Offerte e Richieste di Lavoro e/o Collaborazione 1
Z sono qui in cerca di aiuto Presentati al Forum 2
S State attenti all'utente Antonio 11 è un truffatore che cerca di rubarvi le pagine Annunci servizi di Social Media Marketing 1
antonio95 Ignoranza Rattusa Cerca Offerte e Richieste di Lavoro e/o Collaborazione 0
darioc Creathead cerca sviluppatori App Mobile Offerte e Richieste di Lavoro e/o Collaborazione 0
Marcomdm Ciociaria viva cerca agenti di commercio Offerte e Richieste di Lavoro e/o Collaborazione 0
M [SI CERCA] Grafico per rinnovare applicazione My Shopping List Offerte e Richieste di Lavoro e/o Collaborazione 0
V L'Essenziale cerca collaboratori, autori e siti di appoggio Offerte e Richieste di Lavoro e/o Collaborazione 0
L [gratuito][offro] Radio artista web cerca collaboratore Web Master Offerte e Richieste di Lavoro e/o Collaborazione 1
I [CERCO] Web agency di Milano cerca sviluppatori mobile XAMARIN Offerte e Richieste di Lavoro e/o Collaborazione 0
G Aiuto! Studente cerca aiuto per un codice PHP PHP 1
S Circo Cerca Webmaster Offerte e Richieste di Lavoro e/o Collaborazione 5
V [Offerta di lavoro] Startup cerca ingegneri/programmatori Offerte e Richieste di Lavoro e/o Collaborazione 0
S [OFFERTA DI LAVORO] [RETRIBUITO] SexyDeal cerca SVILUPPATORE PHP FrontEnd - BackEnd Offerte e Richieste di Lavoro e/o Collaborazione 0
A [offerta lavoro a Roma ] Unʼopportunità per te, YourPersonalJames cerca web-designer. Offerte e Richieste di Lavoro e/o Collaborazione 0
D PHP: funziona cerca tipo facebook PHP 2
Shyson Cerca nel sito e nel web Javascript 0
E come si ricrea in maschera la casella "CERCA" già inserita nel riquadro di spostamento record AC2010 MS Access 0
Y Cerca Forum SEO e Posizionamento 0
Emix Riempire campi direttamente tramite cerca.... PHP 8
M Ma tutta sta gente che cerca personale che lavora gratis? Ma è normale?! Discussioni Varie 6
S [umorismo] www.stupidolandia.it cerca scambi link Offerte e Richieste di scambio links 2
A php piccolo form cerca PHP 6
I Facile.it cerca Web Designer creativi e veloci! Offerte e Richieste di Lavoro e/o Collaborazione 0
I Facile.it Spa cerca Senior Web Developer forti! Offerte e Richieste di Lavoro e/o Collaborazione 0
G Nota rivista online cerca articolisti Offerte e Richieste di Lavoro e/o Collaborazione 0
T funzione cerca per il mio sito PHP 4
B joomla modulo cerca numero caratteri limitato Joomla 0
Z Campo CERCA PHP 5
W La Work in Time Srl cerca un webmaster Offerte e Richieste di Lavoro e/o Collaborazione 0
grankionzo Pulsante "cerca nel sito" HTML e CSS 3
S Hai bisogno di un sito: Sono un webDesigner / WebMaster in cerca di clienti Altri Annunci 1
V cerca nel sito Classic ASP 1
W grafico cerca tableless e esperto css per formare una web agency Altri Annunci 0
A Cerca la tua donna qui... Presenta il tuo Sito 3
W Ceciado.it cerca e trova online i siti italiani Presenta il tuo Sito 0
M Tasto cerca Flash 0
SolidSnake4 funzione cerca nel sito PHP 1
chika chan No Cerca? No party! Supporto Mr.Webmaster 2
I Bflab cerca collaboratori Offerte e Richieste di Lavoro e/o Collaborazione 0
Vale1976 PHP cerca file PHP 1

Discussioni simili