AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

As always, links to a demo and ZIP at the bottom, Enjoy!

I thought i would write this tutorial because most of the auto complete applications I have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps I have written here)!



And so we begin:

JavaScript

<script src="jquery-1.2.1.pack.js" type="text/javascript"><!--mce:0--></script><script type="text/javascript"><!--mce:1--></script>

JS Explanation

Ok, the above code it the guts to the script, this allows us to hook into the rpc.php file which carries out all the processing.

The Lookup function takes the word from the input box and POSTS it to the rpc.php page using the jQuery Ajax POST call.

IF the input string is ’0′ (Zero), it hides the suggestion box, naturally, you would not want this showing if there is nothing in the text box. to search for.

ELSE we take the ‘inputString’ and post it to the rpc.php page, the jQuery $.post() function is used as follows…

$.post(url, [data], [callback])

The ‘callback’ part allows to hook in a function, this is where the real magic if that’s what you can call it happens.

IF the ‘data’ returned length is more than zero (ie: there is actually something to show), show the suggestion box and replace the HTML inside with the returned data.

SIMPLE!

Now for the PHP Backend (RPC.php)

As always my PHP Backend page is called rpc.php (Remote Procedure Call) not that it actually does that, but hey-ho.

// PHP5 Implementation - uses MySQLi.
$db = new mysqli('localhost', 'root' ,'', 'autoComplete');
if(!$db) {
    // Show error if we cannot connect.
    echo 'ERROR: Could not connect to the database.';
} else {
    // Is there a posted query string?
    if(isset($_POST['queryString'])) {
        $queryString = $_POST['queryString'];
        // Is the string length greater than 0?
        if(strlen($queryString) &gt;0) {
        // Run the query: We use LIKE '$queryString%'
        // The percentage sign is a wild-card, in my example of countries it works like this...
        // $queryString = 'Uni';
        // Returned data = 'United States, United Kindom';
 
        $query = $db-&gt;query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10");
        if($query) {
            // While there are results loop through them - fetching an Object (i like PHP5 btw!).
            while ($result = $query -&gt;fetch_object()) {
                // Format the results, im using
	<li> for the list, you can change it.
                // The onClick function fills the textbox with the result.
                echo '</li>
	<li onclick="fill(''.$result-&gt;value.'');">'.$result-&gt;value.'</li>
';
            }
        } else {
            echo 'ERROR: There was a problem with the query.';
        }
    } else {
        // Dont do anything.
    } // There is a queryString.
} else {
    echo 'There should be no direct access to this script!';
}
}
 
?&gt;

PHP Explanation

I’m not going to go into much detail here because there are loads of comments in the code above.

Basically, it takes the ‘QueryString’ and does a query with a wildcard at the end.

This means that in this case of the code each key-press generates a new query, this is MySQL intensive if it’s always being done, but short of making it exceedingly complex it is fine for small scale applications.

The PHP code is the part you have to change to work in your system, and all it is updating the ‘$query’ to your database, you should be able to see where you put the table column name in etc…

CSS Styling – i am using CSS3, YEA BABY! much easier although limits the functionality to Firefox and Safari.

<!--
.suggestionsBox {
    position: relative;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #212427;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000;
    color: #fff;
}
 
.suggestionList {
    margin: 0px;
    padding: 0px;
}
 
.suggestionList li {
    margin: 0px 0px 3px 0px;
    padding: 3px;
    cursor: pointer;
}
 
.suggestionList li:hover {
    background-color: #659CD8;
}
-->

The CSS is pretty standard, nothing out of the ordinary.

Main HTML

&lt;div&gt;
 
       &lt;div&gt;
 
 			Type your county (for the demo):
<input id="inputString" onkeyup="lookup(this.value);" size="30" type="text" />
 
 		&lt;/div&gt;			&lt;div class="suggestionsBox" id="suggestions" style="display: none;"&gt;
 
 			<img style="position: relative; top: -12px; left: 30px;" src="upArrow.png" alt="upArrow" />
 
 			&lt;div class="suggestionList" id="autoSuggestionsList"&gt;
 
&lt;/div&gt;
 
 		&lt;/div&gt;
 
&lt;/div&gt;

That is the main bit of HTML, really all you need to run this is an input text box with the ‘onkeyup’ function set to look up(this.value); Also, I recommend NOT changing the ID of the input box, unless you change it in the Javascript section :)

Screenshots ;-)

I suppose you want to see some more screen shots…. OK.

And another one!

And now for the links… this is probably what you are all looking for!

Source ZIP: AutoComplete Source ZIP

If you need a domain to get you off your local test box buy domains at Network Solutions!

If you have any problems, just post them up here (as comments) and i am sure i can help you fix it :)

Thanks for the continued support,

Jamie.

 

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Contributions
Why You Need A Slow Cooker Today

Slower cookers, or as they have been more affectionately called, crock-pots, truly are a boon to anyone in charge of preparing full-scale meals under time restraints and other restrictions. With advancements in slow cooker technology along with their ease of use, coupled with a plethora of recipes designed specifically for …

Contributions
New Milestone Eclipsed

Nodstrum is celebrating a milestone today when it signed up its 100,000th subscriber to its Ultimate Holistic Care Package Program. This is just another feather in our cap as we continue to grow as an organization. It also shows that people continue to patronize our products and services and that …

Contributions
My Car Was Damaged At The Garage – Who’s Coughing Up?

When you leave your car with a garage or mechanic, you’re effectively giving them your trust to not damage your vehicle or affect it negatively in any way, and why would they? It’s their job to make sure your vehicle works how it’s meant to, and any negative impact they …