Tragen sie hier ihren Suchbegriff ein.

AJAX Suche in Wordpress

also nach dem ich immernoch von AJAX begeistert bin habe ich die Suchfunktion von Wordpress so umgeschrieben das man die Ergebnisse nicht mehr im Content Layer ausgegeben bekommt sondern nur noch die Headlines aufgelistet in der rechten Spalte. Das Script hat allerdings noch zwei Fehler: 1.) funktinoiert es nicht 100%ig im IE (<7) und 2.) reagiert es nur auf Knopdrücken, drückt der User die Enter/Retrun taste im Eingabefeld, werden die Suchergebnisse wieder im Content Div angezeigt.
Aber ansonsten finde ich den Effekt nett die Artikel Headlines nur rechts klein zu haben statt die komplette Seite neu zu laden.

Damit das funktioniert muss das Suchformular so umgeschrieben werden das der Knopf kein “submit” mehr ist sondern sollte vom Typ “button” sein. Desweiteren braucht man eine allgemeine AJAX Funktion die einen Layer aktualisiert, siehe dafür: “mal prototpye.js & co anwenden”.
Hier nun jedenfalls der Code:

<!– das steht im Template –>
<div id="searchField"><script type="text/javascript"><!–
updateDiv(’searchField’,'http://blog.johnobo.de/?search=new’);
// –></script></div>
# das steht in der index.php um entweder das Suchfeld
# oder die Ergebnisse wieder zugeben.
if($_GET[’search’] == "results") {
?&gt;
<h3>Ergebnisse</h3>
if (have_posts()) : while (have_posts()) : the_post();
?&gt;

<a class="test" title="Link zu &lt;?php the_title(); ?&gt;" rel="bookmark" href="&lt;?php the_permalink() ?&gt;"></a>

endwhile; else:
?&gt;
keine Ergebnisse

endif;?&gt;
<a style="margin-left:25px; color:#aeaeae" href="javascript:updateDiv(’searchField’,'http://blog.johnobo.de/?search=new’);">neue Suche starten &gt;&gt;</a>
};
if($_GET[’search’] == "new") {
?&gt;
<h3>neue Suche</h3>
<form id="searchform" style="margin-bottom:10px;">
<div><input id="s" name="s" type="text" value="&lt;?php the_search_query(); ?&gt;" /> 

<input id="searchsubmit" onclick="updateDiv(’searchField’,'http://blog.johnobo.de/?search=results&amp;s=’+this.form.s.value.replace(/ /gi,’+'))" type="button" value="Einträge sichten" /></div>
 

</form>};?&gt;&gt;

Kategorien:AJAX, Johannes Ulrich Gehrke, PHP, Programmieren, web



Keine Kommentare


kommentieren