MooTools Autocomplete Ajax Script

MooTools Autocomplete Ajax Script

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 3.00 out of 5)
Loading ... Loading ...
2,858 views

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:

</strong><strong><input id="fe-search" name="search" type="text" /></strong>

And the example PHP for the database query:

// 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

Download:

Source: http://www.ajaxdaddy.com/mootools-autocomplete.html

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

  1. Autocomplete TextboxList Script Extend TextboxList to add closing functionality via a link added...
  2. Ajax Autocomplete Script using jQuery This tutorial for the auto completer applications i have seen...
  3. jQuery Plugin: Tokenizing Autocomplete Text Entry This is a jQuery plugin to allow users to select...
  4. Javascript Calendar Using MooTools The idea is to use MooGenda to quickly expose your...
  5. Animated Ajax Delete : jQuery I’m a huge fan of WordPress’ method of individual article...

Do you like this post?

Email:     

Tags: , ,

1 Comment »

  1. avatar comment-top

    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

    comment-bottom

RSS feed for comments on this post. TrackBack URL

Leave a comment



Web Design & CSS (Templates) - TOP.ORG