Scribd
Upload
66 views

Auto Completer Tutorial

The document provides a tutorial for building an autocomplete form field using jQuery, AJAX, PHP, and a MySQL database. It includes code samples and explanations for the JavaScript, PHP, and CSS used. The JavaScript handles form input changes and sends requests to the PHP backend. The PHP code queries the database based on the input and returns matching results. The results are displayed in a suggestions box using CSS styling.

Uploaded by

rieskha
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
66 views

Auto Completer Tutorial

The document provides a tutorial for building an autocomplete form field using jQuery, AJAX, PHP, and a MySQL database. It includes code samples and explanations for the JavaScript, PHP, and CSS used. The JavaScript handles form input changes and sends requests to the PHP backend. The PHP code queries the database based on the input and returns matching results. The results are displayed in a suggestions box using CSS styling.

Uploaded by

rieskha
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

AutoCompleter Tutorial -

jQuery(Ajax)/PHP/MySQL
I thought i would write this tutorial because most of the auto completer 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"></script><script


type="text/javascript">

function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$(‘#suggestions’).hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$(‘#suggestions’).show();
$(‘#autoSuggestionsList’).html(data);
}
});
}
} // lookup

function fill(thisValue) {
$(‘#inputString’).val(thisValue);
$(‘#suggestions’).hide();
}

</script>

JS Explaniation

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 inputString 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 thats
what you can call it happens.

IF the ‘data’ returned length is more than zero (ie: there is actually something to show),
show the suggestionBox 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) >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->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 ->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 onclick="fill(’‘.$result->value.’‘);">’.$result->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!’;
}
}

?>

PHP Explaination

Im 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 en.

This means that in this case of the code each key-press generates a new query, this is
MySQL intensive if its 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 the 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 - im using CSS3, YEA BABY! much easier although limits the
functionality to Firefox and Safari.

<style type="text/css">

.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;
}
</style>

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

Main HTML

<div>

<div>

Type your county (for the demo):


<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />

</div> <div class="suggestionsBox" id="suggestions" style="display: none;">

<img src="upArrow.png" style="position: relative; top: -12px; left: 30px"


alt="upArrow" />

<div class="suggestionList" id="autoSuggestionsList">

</div>

</div>

</div>

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 lookup(this.value); Also, i recommend NOT changing the
ID of the input box, unless you change it in the Javascript section

You might also like