Are you an Ajax newbie and are you looking for a simple way to implement autosuggest feature for your PHP site?
This tutorial explains how to implement a simple PHP ajax search with autosuggest feature using some lines of PHP and Javascript code. The result is like this:
How it works
The package contains:
- index.php (search form)
- config.php (MySQL connection's parameters. Change them!)
- search.php (PHP code to execute query)
- ajax_framework.js (javascript functions to enable ajax feature)
When an user type a string in the input field with id "search-q" the function autosuggest() searches the current string into a database table...
<input name="search-q" id="search-q" type="text" onkeyup="javascript:autosuggest()"/>
<div id="results"></div>
<div id="results"></div>
... and the script shows search results into the <div> with id "result".
All files are fully customizable. Remeber to change connection's parameter in config.php and SQL code for $getRecord_sql query in search.php. I used a generic query in search.php... change the code in bold changing table name (INVENTORY) and table field (TAG):
$getRecord_sql = 'SELECT * FROM INVENTORY WHERE TAG LIKE "'.$searchq.'%"';
Download this tutorial
Thanks. I'm searching for this tutorial!
To any one using this please note it does not escape the user input, there for if you use it unmodified you are open to SQL injection and also XSS attacks as the output is not escaped either.
You should use something like mysql_real_escape_string, casting, ctype_* or even regex but please use something.
Other then that nice article :)
Hi Antonio, great tutorial! Simple and clear :))
I love this, but if you click on one of the result, that result should appear in the textbox, how do i do this?
Could this work for blogger?
great script man, really solid work.
anyone know how to apply arrow keys to highlight the suggestions?
Thanks
I received empty field after text-typing. Made all instructions.
What a problem?
Hi Antonio this is great !
Could you tell us what's the best way to copy result value to a search box???
Post a Comment