GweeDo767I have implemented a great new search box on my blog using AJAX. You can see it at grebowiec.net. In the search sipmly type what you want to search for (say "linux") and then do nothing. It will get the results for you. Here are the two files you need to implmenet it:
search.php (the server side part):
<?php
mysql_connect("HOST","USER","PASSWORD");
@mysql_select_db("TABLE") or die("Freaking db seems to have left");
//make sure that string isn't in use
$search = $_REQUEST['val'];
$sql = "SELECT * FROM wp_posts WHERE post_title LIKE '%$search%' OR post_content LIKE '%$search%'";
$result = mysql_query($sql);
$num = mysql_numrows($result);
mysql_close();
$i=0;
while($i<$num) {
$id = mysql_result($result,$i,"ID");
$title = mysql_result($result,$i,"post_title");
?>
"><? echo $title ?>
<?
$i++;
}
if($num == 0) {
?>
No Results on '<? echo $search ?>'
<?
}
?>
END SEARCH.PHP
Then on the client side, enter this for searchform.php in your Template editor:
<input type="text" name="searchInput" id="searchInput"> Search
<div id="searchresults"></div>
<script language="JavaScript">
// from js_util.js by scottandrew.com/junkyard/js/
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
// end from scottandrew.com/junkyard/js/
var valBox = document.getElementById("searchInput");
var displayBox = document.getElementById("searchresults");
addEvent(valBox, 'keyup', doTest, false);
var keyPressDelay = '';
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
function doTest() {
if (keyPressDelay) {
window.clearTimeout(keyPressDelay);
}
if(valBox.value != '') {
keyPressDelay = window.setTimeout('doSearch()',800);
}
}
function doSearch() {
displayBox.innerHTML = "Searching ...";
xmlhttp.open("GET","search.php?val="+valBox.value,true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
displayBox.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
</script>
END SEARCHFORM.PHP
Let me know what you guys think. I think this is a great addition.
MrM
jpgodlew
oso
