jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Home page > Plugins > Il plugin "SearchHighlight"

Il plugin "SearchHighlight"

giovedì 17 maggio 2007, di Renato

Tutte le versioni di questo articolo: [English] [français] [italiano]

Questo plugin evidenzia le parole ricercate quando si arriva su una pagina da un motore di ricerca.


Demo

Una pagina dimostrativa per testare tutte le principali opzioni di configurazione del plugin

L’idea

L’idea di evidenziare le parole ricercate quando si arriva su una pagina da un motore di ricerca, non è affatto nuova. Non sempre è evidente dove siano le parole ricercate all’interno di una pagina, soprattutto se questa è molto lunga, oppure se l’argomento della pagina non è proprio quello che stavamo cercando . Riuscire ad individuare la parte della pagina che contiene le parole ricercate fa capire immediatamente all’utente se ciò che sta visionando risponde pienamente alla ricerca che ha effettuato.

Come funziona

Il plugin è molto semplice da usare e consiste in un’unica funzione SearchHighlight(opzioni), da applicare al document.

Il CSS

<style type='text/css'>
 span.hilite {background:yellow}
</style>

Il codice JS

<script src='SearchHighlight.js'></script>
<script type='text/javascript'>
  var opzioni = {exact:"whole",style_name_suffix:false};
  jQuery(function(){
    jQuery(document).SearchHighlight(opzioni);
  });
</script>

SearchHighlight verifica il sito di provenienza e, se si tratta di uno dei motori di ricerca che riconosce, estrae i termini ricercati e li evidenzia nella pagina corrente. E’ possibile anche specificare esplicitamente le parole da ricercare, nel qual caso il plugin non effettuerà alcuna verifica sul referrer [1].

Le opzioni

Il plugin è pienamente configurabile grazie ad una serie di opzioni:

  • exact (stringa, valore predefinito:"exact")
    "exact" : cerca ed evidenzia le parole identiche a quelle ricercate
    "whole" : cerca corrispondenze anche parziali delle parole ricercate ma evidenzia la parola interamente
    "partial": cerca ed evidenzia corrispodenze anche parziali delle parole cercate
  • style_name (stringa, valore predefinito:"hilite")
    La classe dell’elemento span che racchiude le parole da evidenziare.
  • style_name_suffix (booleano, valore predefinito:true)
    Se vero viene aggiunto un numero allo stile definito da style_name per ogni diversa parola trovata. Utile per assegnare un diverso colore di evidenziazione ad ogni parola.
  • debug_referrer (stringa, valore predefinito:null)
    Imposta manualmente un referrer a scopo di debug.
  • engines (matrice di espressioni regolari, valore predefinito:null)
    Aggiunge le espressioni regolari per il riconoscimento di ulteriori motori di ricerca.
    Il primo elemento è l’espressione regolare che individua il dominio.
    Il secondo elemento è l’espressione regolare che individua i parametri in cui si trovano le parole cercate (query string)
    Es: [/^http:\/\/my\.site\.net/i,/search=([^&]+)/i] consente il riconoscimento del dominio http://my.site.net come un motore di ricerca ed estrae le parole ricercate dal parametro search.
    http://my.site.net?search=parola_cercata
  • highlight (selettore o oggetto jQuery, valore predefinito:null)
    Il plugin può effettuare la ricerca delle parole anche solo per alcune parti della pagina. Tali parti vengono selezionate da un selettore od un oggetto jQuery. Se null o se nessun elemento viene selezionato, tutto il documento è abilitato per l’evidenziazione
  • nohighlight (selettore o oggetto jQuery, valore predefinito:null)
    Questa opzione seleziona gli elementi da escludere dall’evidenziazione.
  • keys (stringa, valore predefinito:null)
    Consente di specificare esplicitamente le parole da ricercare, disabilitando nello stesso tempo la verifica del sito di provenienza. Utile per disabilitare l’evidenziazione delle richieste provenienti dai motori di ricerca o per evidenziare delle parole da estrarre dall’url o dalla pagina stessa.

Documenti allegati

Note

[1] il referrer è l’indirizzo della pagina da cui si proveniene

Rispondere all'articolo

1 Messaggio

  • (logo)

    Il plugin "SearchHighlight" : some improvement ?

    21 settembre 2007 11:52, di Tartembouille

    Hi,

    I am sorry but I speak only french and english (bad english !).

    Great work your plugin is very good !

    Nevertheless I see two improvement possible :
    - adding a removeHihghlight() function
    - applying the highlight ont the jQuery object fist parameter (as a first filter for highlitable elements) : jQuery("#my_element_i_want_to_hightlight").searchHighlight(option);

    What do you think about that ?

    Have a good day

    Rispondere al messaggio


Ultimi commenti