If you would like to use live request there are three main things you need:
- A HTML page with the form.
- The liveRequest.js file
- A php file that will query your database and return the results
So let's just step through these one by one.
The HTML Special
While the HTML used to create this effect is fairly straight forward there are a few important parts. In your set up you will need a form with an input field, and you will need a div (or p, or whatever content block you wish to use.)
The form will look something like this:
<form action="search.php" method="post">
<input type="text" name="s" id="search" />
</form>
The important parts of this code is the action attribute on the form, and the id attribute on the input. Remember these values, you will use them later. Also, with the way the PHP is set up below, if you want this to work when JS is disabled, you need to keep the name attribute set to "s". If you are not worried about people not having JS, you can scrap the form tags entirely and just have an empty input tag floating there.
The block section might look like this:
<div id="searchresults"></div>
Again, the id attribute is important.
The liveRequest.js Jumble
There is very little you need to change to this file - cause it's made awesome like that. All the things you do need to change are at the top in the "User configured variables" section.
var searchFieldId = 'search';
var resultFieldId = 'searchresults';
var processURI = '/search.php';
var emptyString = '';
The searchFieldId is the id of the input tag that you have setup in your HTML.
The resultFieldId is the id of the div block you used where the search results will show up.
The processURI is the location of the script that you are using to search your database or whatever.
Finally, the emptyString is what will be displayed when there is nothing typed in the input area. I would use this for something like "<p>Type a search above and the results will show up here.</p>"
The PHP Magic
This is the most complicated portion of this tutorial (since the HTML and JS are pretty cut and dry.) Unfortuneately, people will probably want to integrate this into either MoveableType, TextPattern, or WordPress, and I don't run any of those - so I don't know exactly how to tie into those systems.
However, here is a basic search.php setup:
<?php
//
$db_cid = mysql_connect('localhost','YOUR-USER-NAME','YOUR-PASSWORD')
or die("<p><b><font color=red>Oh Crap!</font></b></p>/n<p>It seems MySQL is down. (Mysql Connection Error: " . mysql_error() . ") so please try again later.</p>");
//
function db_query($sql) {
global $db_cid;
$result = mysql_db_query('YOUR-DATABASE',$sql,$db_cid)
or die("<p><strong>Error in MySQL Query:</strong><br />$sql</p><p><strong>MysQL Says:</strong><br />" . mysql_error() . "</p>" );
return $result;
}
//
$searchQuery = urldecode($_REQUEST[s]);
//
$sql = "SELECT keyword, title, summary, text FROM posts WHERE "
."title LIKE '$searchQuery' OR "
."summary LIKE '$searchQuery' OR "
."text LIKE '$searchQuery' "
."LIMIT 5 ";
//
$result = db_query($sql);
//
if(mysql_num_rows($result) > 0) {
echo("<ol>");
while($row = mysql_fetch_array($result)) {
//
echo("<li><a href=/"/url-to-entry/$row[keyword]/">$row[title]</a><br />$row[summary]</li>");
//
}
echo("</ol>");
} else {
echo("<p>No results for /"$searchQuery/".</p>");
}
//
?>
Now, that's a basic setup - and even at that it is pretty intimidating. Be mindful, the above will, almost guaranteed, not work on your setup - whatever it be. That said, if you are running any popular blogging software, are a good hand at PHP, and would like to share your integration please leave a comment! Others will thank you greatly!
