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

di
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.

Leggi anche:

Tips per il nuovo WordPress: come allargare la dashboard tramite CSS Come visualizzare una lista dei post recenti nei blog WordPress anche quando il tema utilizzato non lo permette Come alternare i colori di sfondo dei commenti nei blog WordPress 20 tipi di pagine che ogni blogger dovrebbe prendere in considerazione Blog WordPress, come utilizzare una home page diversa da quella predefinita

35 commenti su “How To: creiamo un autocompletamento in Ajax nel motore di ricerca di WordPress!”

  3. @ 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

    Rispondi

  4. 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

    Rispondi

  6. 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

    Rispondi

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

    Magari è sbagliato?

    Rispondi

  10. 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.

    Rispondi

  11. Very nice post. I just stumbled upon your blog and wished
    to say that I have really enjoyed browsing your blog posts.

    After all I will be subscribing to your feed and I hope you write again very soon!

    Rispondi

  13. I’m not that much of a online reader to be honest but your blogs really nice, keep it up!
    I’ll go ahead and bookmark your website to come back in the future.
    Cheers

    Rispondi

  14. I think this is one of the most significant info for me. And
    i am glad reading your article. But wanna remark on some general things,
    The web site style is ideal, the articles is really great
    : D. Good job, cheers

    Rispondi

  16. Nice post. I learn something totally new and challenging on sites I stumbleupon everyday.
    It will always be useful to read through articles from
    other writers and use a little something from their
    sites. 0mniartist asmr

    Rispondi

  35. [url=http://doxycycline.download/]doxycycline 100mg price south africa[/url] [url=http://tetracycline.email/]tetracycline online purchase[/url] [url=http://apropecia.com/]generic propecia safe[/url]

    Rispondi

Lascia un commento