ricerca con Ajax e Highlight

[blackskyisback]

Con questo script in Ajax effettuo la ricerca in realtime nella stessa pagina

 <script type="text/javascript">
            $("#invia").click(function(){                
                $.ajax({    
                    type: "POST",  
                    url: "results_actor.php", 
                    data: "input_nome=" + $("#nome").val(),
                    success: function(response){
                        $("#risultato").html(response);
                    }
                }); 
            });          
        </script> 

quello che vorrei ottenere e' evidenziare il testo trovato, la funzione si chiama Highlight

esempio:

digito cane e tutti i risultati con la parola cane vengono evidenziati

come fare?

[GraphOGLRisorse]

Salve,
nel web ci sono diverse libreirie gratutite per farlo.

Una delle più semplici da implementare e performanti, tra quelle che provai in passato, è la libreria hilitor.

Un ulteriore esempio sull'utilizzo della libreria, lo trova qui.

Cordiali saluti.

[blackskyisback]

Ciao GraphOGLRisorse,

non e' cosi semplice, prima bisogna digitare il testo nella form e poi tramite invio viene chiamato Ajax ed eseguita la query che visualizza i risultati

questo che mi hai segnalato evidenzia i valori nella stessa pagina senza codice php e mysql

[alemoppo]

Non conosco le librerie segnalate, ma non potresti comunque utilizzarle come callback dopo aver ricevuto i dati da ajax?

Altrimenti, senza usare JS, da PHP dovresti sostituire tutti i vari $_POST['input_nome'], una cosa come:

str_replace($_POST['input_nome'], '<span class="highlight_text">'.$_POST['input_nome'].'</span>', $testo_pagina); 

Ovviamente con un css appropriato, ovvero definendo la classe css opportunamente (ad esempio .highlight_text{background-color:#FFFF00;} ).

Ciao!

[blackskyisback]

Ciao alemoppo

la pagina result_actor.php ha questo pezzo di codice

$_POST['input_nome']=trim($_POST['input_nome']); // funzione per eliminare spazi vuoti
$value = $_POST["input_nome"]; 

ho provato ad adattarlo cosi ma non vedo nessun cambiamento

str_replace($_POST['input_nome']=trim($_POST['input_nome']), '<span class="highlight_text">'.$_POST['input_nome'].'</span>', $value); 
$value = $_POST["input_nome"]; 

css

<style>

 .highlight_text{background-color:#F8FA06;}
</style>

[blackskyisback]

risolto cosi

<style type="text/css">
.highlight { background-color: #F8FA06; } 
</style>

<?php echo  str_replace($value, "<span class=\"highlight\">$value</span>", $nome);?>

grazie a tutti per il vostro aiuto

[blackskyisback]

riscontrato un problema
se scrivo Alex funziona, ma se scrivo alex non evidenzia piu'

la funzione str_replace come riportato dal sito e' case sensitive

Note:

This function is case-sensitive. Use str_ireplace() for case-insensitive replace.

https://www.php.net/manual/en/function.str-replace.php

allora bisogna sostituire con str_ireplace

str_ireplace() - Case-insensitive version of str_replace

https://www.php.net/manual/en/function.str-ireplace.php

la cosa che non avevo notato prima (per via della funzione) e che sostituisce il testo evidenziato in base a come si digita nella casella di input

esiste un metodo alternativo che evidenzia solamente e lascia inalterato il testo?

[blackskyisback]

ecco il fix, in questo modo vengono cercate tute le parole nel database (che sono con la prima lettera maiuscola)anche se si digita in maisuscolo e o minuscolo nella form

$_POST['input_nome']=trim($_POST['input_nome']); // funzione per eliminare spazi vuoti
$value = ucwords(strtolower($_POST['input_nome'])); // trasforma la prima lettera in maiuscolo 

<?php echo  str_ireplace($value, "<span class=\"highlight\">$value</span>", $nome);?>