Searching With Ajax

phpnut

I'm trying to use ajax to search for entries in a database with a certain tag using a php processing page. I would like to have a select drop down box that gives a list of options and when selected, and the submit button is clicked, the tag is sent using GET to a php page which searches the database. The returned data is then sent back to the page and displayed in a <div>. I know this is pretty simple, but I'm a newbie at ajax (and javascript) and have had failed attempts at this numerous times. Thanks a lot for any help!

WatchOut

Sorry phpnut, nothing i can help you with

Nuvo

Here's a bit of code I've just ripped from something I made.
It uses the prototype JS library and makes a form submit via AJAX rather than by normal methods, though it will fall back on a standard method should the user not have JavaScript enabled:
[html]
<form action="/dynamic_search" method="post" onsubmit="new Ajax.Updater('searchresult', '/dynamic_search', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;">
<input id="searchkey" name="searchkey" type="text" />
<input name="commit" type="submit" value="Search" />
</form>
[/html]
That was built by Rails using Rails code rather than JavaScript, but I'll go over it anyway as it shouldn't be too hard to read...

<form action="/dynamic_search" method="post"

Standard form element in HTML that will go to "dynamic_search" or wherever you point it if JS is turned off or not supported.

onsubmit="new Ajax.Updater('searchresult', '/dynamic_search', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;"

When the user submits the form via the submit button the JS is triggered.
The Ajax.Updater() is part of Prototype, and it does what it sounds like, it updates the page with AJAX techniques (sending a request and then using the DOM to make changes to the page).
The main things you need to think about here are the first argument, which is the I.D. of the element you're updating (in this case, it's a div for the search results, thus we called it 'searchresult') and the second argument, which is where the script is pointed, which can be the same place as the non-AJAX location, or somewhere else if you want it to look a little better (if you want a full page rather than just the results).
Then you just throw in your input fields and close the form.

Accessing the form data should be as easy as normal.

You could also use observers for this to cut out the submit button completely, though this might be a bit less efficient at times.

phpnut

Thanks, Nuvo. I'm not familiar with any of the frameworks, but will try and implement your suggestion. Would you know how to do this using straight javascript?

Nuvo

All you have to do to get that example working is to get the prototype.js file and include it in your page with a standard JS include tag such as:
[html]<script src="/javascripts/prototype.js" type="text/javascript"></script>[/html]

Prototype is pretty much required for every other pretty AJAX thing out there such as Scriptaculous effects and Rico, so it's worth looking into.
Using Prototype and Scriptaculous can cut a fair bit of work out of doing things like drag and drop interfaces and Prototype is included with Scriptaculous, so you don't need to get it if you're using Scriptaculous.

WatchOut

Wow thanks for your help Nuvo! Really good information, very new to me.