A MooTools Autocompleter widget that creates a unobtrusive and customisable suggestion box for input fields from variable data sources. Try it out, it can load the suggestions from a local object or via XHR from a JSON or an XHTML source.
Example in the Playground which includes an Local, Json and Ajax Autocompleter.
Compatibility
Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+)
Features
All classes extend the base class Autocompleter.Base, which provides all basic features to create an Autocompleter from any provided source. Both, Ajax.Json and Ajax.Json extend Autocompleter.Ajax.Base, which handles the query request and response.
How to use with PHP:
window.addEvent('domready', function() {
new Autocompleter.Request.JSON('fe-searchuser', '/query_user.php', {
'postVar': 'search'
});
});
Your XHTML markup, no additional elements needed:
And the example PHP for the database query: Download: Source: http://www.ajaxdaddy.com/mootools-autocomplete.html Related Listings:</strong><strong><input id="fe-search" name="search" type="text" /></strong>
// query_user.php
$search = $_POST['search'];
$result = array();
// Some simple validation
if (is_string($search) && strlen($search) > 2 && strlen($search) < 64)
{
$dbh = new PDO('mysql:host=localhost;dbname=test', $user, $pass);
// Building the query
$stmt = $dbh->prepare("SELECT name FROM users WHERE name LIKE ?");
// The % as wildcard
if ($stmt->execute(array($search . '%') ) )
{
// Filling the results with usernames
while (($row = $stmt->fetch() ) )
{
$result[] = $row['name'];
}
}
}
// Finally the JSON, including the correct content-type
header('Content-type: application/json');
echo json_encode($result); // see NOTE!
?>
Demo: http://www.ajaxdaddy.com/mootools-autocomplete.html
RSS feed for comments on this post. TrackBack URL
October 14th, 2009 at 8:50 pm
This script works only with ’script.php’ but it doesn’t if you pass the url as ‘http:www.mydomain.com/script.php’. I don’t know what is the problem