Geekissimo

How To: creiamo un autocompletamento in Ajax nel motore di ricerca di WordPress!

 
@mister6339 (Michele Laganà)
11 settembre 2008
10 commenti
FLV Converter

Geekissimo è l’impero dei Geek, e ogni Geek che si rispetti ha un proprio blog WordPress. WordPress è la piattaforma migliore e la più usata, nella creazione di Blog personali e non. E’ una delle più personalizzabili, oggi vedremo come personalizzare il tema che abbiamo impostato sul nostro blog. Nell’articolo di oggi vedremo come aggiungere un autocompletamento nel campo di ricerca del tema.

Il tutorial di oggi si dividerà in 4 parti, le quali andranno a modificare una parte diversa del tema. Il primo passo da seguire sarà quello di creare una pagina PHP, con il nome gettags.php, nella quale andremo ad inserire il seguente codice:
< ?php
if (isset($_POST['search'])) {
$search = htmlentities($_POST['search']);
} else $search ='';
$db = mysql_connect('localhost','root',''); //Don't forget to change
mysql_select_db('wp', $db); //theses parameters
$sql = "SELECT name from wp_terms WHERE name LIKE '$search%'";
$req = mysql_query($sql) or die();
echo '<ul>';
while ($data = mysql_fetch_array($req))
{
echo '<li><a href="#" onclick="selected(this.innerHTML);">'.htmlentities($data['name']).'</a></li>';
}
echo '';
mysql_close();
?>


Una volta portato a termine questo passaggio arriviamo nella seconda fase della guida. Ora andremo a creare la direttiva Ajax che poi farà funzionare il nostro piccolo effetto. Creiamo un file gettags.js, contente il seguente codice: var myAjax = ajax();
function ajax() {
var ajax = null;
if (window.XMLHttpRequest) {
try {
ajax = new XMLHttpRequest();
}
catch(e) {}
}
else if (window.ActiveXObject) {
try {
ajax = new ActiveXObject("Msxm12.XMLHTTP");
}
catch (e){
try{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
return ajax;
}
function request(str) {
//Don't forget to modify the path according to your theme
myAjax.open("POST", "wp-content/themes/openbook-fr/gettags.php");
myAjax.onreadystatechange = result;
myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myAjax.send("search="+str);
}
function result() {
if (myAjax.readyState == 4) {
var liste = myAjax.responseText;
var cible = document.getElementById('tag_update').innerHTML = liste;
document.getElementById('tag_update').style.display = "block";
}
}
function selected(choice){
var cible = document.getElementById('s');
cible.value = choice;
document.getElementById('tag_update').style.display = "none";
}

Una volta fatto questo, andiamo a modificare il file searchform.php del nostro tema. Aprendo il file vi troverete davanti un codice simile a questo:
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
<input type="text" value="<?php the_search_query(); ?/>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

Andatelo ad eliminare completamente e sostituitelo con questo:<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
<input type="text" value="<?php the_search_query(); ?/>" name="s" id="s" onkeyup="request(this.value);"/>
<input type="submit" id="searchsubmit" value="Search" class="button" />
</div>
<div id="tag_update"></div>
</form>

Una volta salvato il tutto, aprite il file CSS del tema e inserite le seguenti direttive:#tag_update {
display: block;
border-left: 1px solid #373737;
border-right: 1px solid #373737;
border-bottom: 1px solid #373737;
position:absolute;
z-index:1;
}
#tag_update ul {
margin: 0;
padding: 0;
list-style: none;
}
#tag_update li{
display:block;
clear:both;
}
#tag_update a {
width:134px;
display: block;
padding: .2em .3em;
text-decoration: none;
color: #fff;
background-color: #1B1B1C;
text-align: left;
}
#tag_update a:hover{
color: #fff;
background-color: #373737;
background-image: none;
}

Bene, una volta salvato anche questo file, avete finito. Adesso provate l’effetto inserendo una parola da cercare nel vostro motore di ricerca e vedete se funziona il tutto. Fatemi sapere se funziona sul vostro blog, per qualsiasi problema lasciate un commento, vedremo di risolverlo tutti insieme.

Potrebbe interessarti anche
Articoli Correlati
Come alternare i colori di sfondo dei commenti nei blog WordPress

Come alternare i colori di sfondo dei commenti nei blog WordPress

Carissimi amici geek aspiranti blogger, o già affermati tali, benvenuti in un nuovo appuntamento dedicato alla piattaforma WordPress ed ai consigli per rendere ancora più piacevole la navigazione nei blog […]

20 tipi di pagine che ogni blogger dovrebbe prendere in considerazione

20 tipi di pagine che ogni blogger dovrebbe prendere in considerazione

Carissimi amici geek, eccoci ancora qui con un nuovo appuntamento dedicato ai blogger, o agli aspiranti tali. Oggi abbiamo deciso di accantonare un po’ gli articoli e la loro struttura […]

Pubblicare articoli sul blog direttamente da Word 2007

Pubblicare articoli sul blog direttamente da Word 2007

Tra le mille funzioni di Word, ce n’è una per noi blogger davvero molto utile ed interessante, che fino a qualche giorno fa non conoscevo. Si tratta della possibilità di […]

Blog WordPress, come utilizzare una home page diversa da quella predefinita

Blog WordPress, come utilizzare una home page diversa da quella predefinita

Da bravi geek avrete sicuramente notato che le home page dei milioni di blog presenti sul web sono quasi tutte impostate nello stesso modo: l’elenco degli articoli più recenti comparsi […]

Blog WordPress, come separare i commenti dai trackback

Blog WordPress, come separare i commenti dai trackback

Ed ecco che anche oggi torniamo a dare una mano a tutti coloro che, per un motivo o l’altro, hanno deciso di aprire un blog utilizzando come piattaforma l’ottimo WordPress […]

Lista Commenti
Aggiungi il tuo commento

Fai Login oppure Iscriviti: è gratis e bastano pochi secondi.

Nome*
E-mail**
Sito Web
* richiesto
** richiesta, ma non sarà pubblicata
Commento

 

  • #1Generazione-Hacker.net

    ottima segnalazione ….

    Ma che plug in usate per fare un piccola pagina che si apre in alto a destra ?? grazie ciao

    11 Set 2008, 3:33 pm Rispondi|Quota
  • #2Floyd

    Cioa, ho seguito alla lettera il tutorial, ma non compare niente sotto la casella di testo del search.

    11 Set 2008, 3:36 pm Rispondi|Quota
  • #3Julien

    @ Generazione-Hacker.net:

    Ciao ! ottima segnalazione…

    Generazione-Hacker.net dice:

    ottima segnalazione ….
    Ma che plug in usate per fare un piccola pagina che si apre in alto a destra ?? grazie ciao

    Per l’effetto angolo della pagina che si apre in alto a destra ci sono diversi mettodi, il piu utilizato è un file Flash con 2 immagini, la tecnica, se possiamo chiamarla tecnica, e il Page Peeling

    11 Set 2008, 3:57 pm Rispondi|Quota
  • #4Motherboard

    Julien dice:

    @ Generazione-Hacker.net:
    Ciao ! ottima segnalazione…
    Generazione-Hacker.net dice:
    ottima segnalazione ….
    Ma che plug in usate per fare un piccola pagina che si apre in alto a destra ?? grazie ciao

    Per l’effetto angolo della pagina che si apre in alto a destra ci sono diversi mettodi, il piu utilizato è un file Flash con 2 immagini, la tecnica, se possiamo chiamarla tecnica, e il Page Peeling

    e più precisamente come si fa? ciao e grazie a tutti

    11 Set 2008, 4:35 pm Rispondi|Quota
  • #5Julien

    @ Motherboard:
    non potendo farti una guida proprio qui .. ti invito ad andare a fare un salto qui…

    http://www.nemoprincess.it/wordpress/diario-di-bordo/effetto-page-peel-come-arricciare-la-pagina.html

    altrimenti su Google scrivi Peel Page

    11 Set 2008, 4:40 pm Rispondi|Quota
  • #6maopapof

    un saluto a tutti :O) …. e con le scuse anticipate per l'intromissione

    ps…………… …. potete perfavore risolvere il pro del ritorno alla pagina precedente che non funziona ? anche con alt + <— …. posso capire che può succedere al caricamento nuovo articolo … ma è una palla sempre ritornare al sito principale ! grazie anticipato

    11 Set 2008, 4:54 pm Rispondi|Quota
  • #7Selmishel

    Non ho capito alla fine dove vanno messi i primi due file.

    In quelle cartella di wordpress? sempre quella del tema?

    11 Set 2008, 4:54 pm Rispondi|Quota
  • #8Selmishel

    In più la sintassi del searchform non è corretta, poichè mi da errore sulla terza linea. Io di php ci capisco ben poco.

    Magari è sbagliato?

    11 Set 2008, 6:00 pm Rispondi|Quota
  • #9Nicola

    A me non funziona niente… resta come prima…

    13 Set 2008, 1:57 pm Rispondi|Quota
  • #10manzy

    So che magari è troppo tardi per commentare questo post ma navigando in rete l'ho trovato e provato per inserire anche io l'autocompletamento… Anche a me nel file searchform.php dava l'errore nella riga 3, effettivamente c'è un / di troppo: al posto di

    <input type="text" value="<?php the_search_query(); ?/>

    penso sia

    <input type="text" value="<?php the_search_query(); ?>

    così a me non dà errori di sintassi o altro, però non funziona in ogni caso… Come si può far funzionare?
    Grazie.

    28 Lug 2010, 3:38 pm Rispondi|Quota