Deprecated: Assigning the return value of new by reference is deprecated in /home/nightglassblogs/blogs.nightglass.com/wp-settings.php on line 592

Deprecated: Assigning the return value of new by reference is deprecated in /home/nightglassblogs/blogs.nightglass.com/wp-settings.php on line 607

Deprecated: Assigning the return value of new by reference is deprecated in /home/nightglassblogs/blogs.nightglass.com/wp-settings.php on line 614

Deprecated: Assigning the return value of new by reference is deprecated in /home/nightglassblogs/blogs.nightglass.com/wp-settings.php on line 650

Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/classes.php on line 1199

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/classes.php on line 1199

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/classes.php on line 1199

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/classes.php on line 1199

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/classes.php on line 1244

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/classes.php on line 1391

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/classes.php on line 1391

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/classes.php on line 1391

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/classes.php on line 1391

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/classes.php on line 1442

Strict Standards: Redefining already defined constructor for class wpdb in /home/nightglassblogs/blogs.nightglass.com/wp-includes/wp-db.php on line 316

Deprecated: Assigning the return value of new by reference is deprecated in /home/nightglassblogs/blogs.nightglass.com/wp-includes/cache.php on line 103

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /home/nightglassblogs/blogs.nightglass.com/wp-includes/cache.php on line 431

Warning: Creating default object from empty value in /home/nightglassblogs/blogs.nightglass.com/wpmu-settings.php on line 33

Deprecated: Assigning the return value of new by reference is deprecated in /home/nightglassblogs/blogs.nightglass.com/wp-includes/query.php on line 61

Deprecated: Assigning the return value of new by reference is deprecated in /home/nightglassblogs/blogs.nightglass.com/wp-includes/theme.php on line 1109

Strict Standards: Declaration of Walker_Comment::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/comment-template.php on line 0

Strict Standards: Declaration of Walker_Comment::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/comment-template.php on line 0

Strict Standards: Declaration of Walker_Comment::start_el() should be compatible with Walker::start_el(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/comment-template.php on line 0

Strict Standards: Declaration of Walker_Comment::end_el() should be compatible with Walker::end_el(&$output) in /home/nightglassblogs/blogs.nightglass.com/wp-includes/comment-template.php on line 0

Strict Standards: Redefining already defined constructor for class WP_Dependencies in /home/nightglassblogs/blogs.nightglass.com/wp-includes/class.wp-dependencies.php on line 31

Strict Standards: Redefining already defined constructor for class WP_Http in /home/nightglassblogs/blogs.nightglass.com/wp-includes/http.php on line 61
Jeremy Noa » Blog Archive » Realtime Search with PHP, MYSQL, and Prototype
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/nightglassblogs/blogs.nightglass.com/wp-includes/kses.php on line 1019

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/nightglassblogs/blogs.nightglass.com/wp-includes/kses.php on line 1020

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/nightglassblogs/blogs.nightglass.com/wp-includes/kses.php on line 1019

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/nightglassblogs/blogs.nightglass.com/wp-includes/kses.php on line 1020

Realtime Search with PHP, MYSQL, and Prototype

July 23rd, 2008 by Jeremy

I wanted to have a live search (much like Apple Spotlight) for a project using php/mysql, so I thought I’d try my hand at figuring it out on my own. If you have any suggestions to make this better, I’m all ears!

In this example, I have a mysql database table with the names of all 43 U.S Presidents, and the number president that they were. I want to search the database for that president and have the search result link to that president’s page on wikipedia.
You can view the demo here. You can download the sample files here.

First, you will need the Prototype javascript framework. We will use this for making the search realtime. Alright, now that you’ve got Prototype, lets get started!

Let’s start by creating an html file called search.html

<body>
Search:
<form id="searchform" method="post" onsubmit="return false;">
<input type="textbox" id="searchbox" onkeyup="sendRequest()" name="name" autocomplete="off" />
</form>

Since we want the search to happen in realtime, we don’t want the user to be able to submit the form, so we added onsubmit=”return false” to prevent this from happening.
We want the results to update as we are typing, so for this we add onkeyup=”sendRequest()”, which will call our javascript function that will send the results to the server every time you type in the text box.
autocomplete=”off” will keep the users browser from auto-completing the form. autocomplete is not valid, so you will need to find an alternative method to solve this if that concerns you (which it should, its just beyond the scope of this entry).

<div id="show_results"></div>

This is the div where our results will appear. You can place this anywhere on your page that you want the results to show up.

<script type="text/javascript" src="prototype.js"></script>
<script>
function sendRequest() {
new Ajax.Updater('show_results', 'search.php', {
method: 'post', parameters: $('searchform').serialize()
});
}
</script>
</body>

This is our javascript function that will send the data to our php file that will perform the query and return our results.

Now, create a php file called search.php

<?
$name = $_POST['name'];
mysql_connect(’localhost’,'root’,'root’);
mysql_select_db(’demos’);
if(empty($name)) {
echo “”; //This is what will display when there is no test in the text box
} else {
echo “<div id=’results’>”;
$sql = “SELECT id, name FROM live_search WHERE name LIKE ‘%$name%’ OR id LIKE ‘$name%’ “;
$result = mysql_query($sql);
while($row = mysql_fetch_assoc($result)) {
$id = $row['id'];
$name = $row['name'];
echo “<a href=’http://en.wikipedia.org/wiki/$name’ target=’_blank’>$id $name</a> <br />”;
}
echo “</div>”;
}
?>

Your query can be whatever you need it to be, you can research this according to your needs. This particular query will pull all results that have any of the characters in it that the user has type into the search field. For example, if you start by typing the letter J, all of the presidents that have the letter J anywhere in their name will be displayed. I can also type the number of the president I am looking for, and it will show me those results as well.

Share/Save/Bookmark

Posted in Web Development

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.