AutoComplete Input Box
So recently at work, I needed to provide two or three input boxes that would automatically populate a list as the user typed. This is similar to what Google’s Instant Search Box does and I’m sure you can think of many other examples throughout the webiverse. I, however, did not know where to start. I found a post on this site that got me off to a great start. I was able to create three input boxes however, as I started to type in the name I was looking for, the AutoComplete would show the results in the first input box’s drop-box. This input box was also the only one populated when I selected a name in the second or third inputs. In order to fix this, I adjusted the javascript to pass variables between the input box, the query, and the final results which allows multiple boxes and queries on the same webpage.
Demo
That’s Great! But how do I use it?
- Download the Code
- Unzip/Extract the Code
- Update the CD.php and CD-Functions.php with your Server Information and add any additional functions you may need to use
- Upload the files to your website’s server
- Include the CSS and Javascript files in the page where you want to use AutoComplete
- Include the HTML portion of the code in your Form
- Add the JavaScript code before the </body> tag on the page you want to use it on
- Send me an email so I can see it in action!
1. Download the Source
2. Unzip/Extract the Code
Let me know if you don’t know how to do this.
3. Update the Source Files
I use Notepad++ for all of my programming needs. It is a great text editor with very advanced features and customization.
4. Upload the Files to Your Server
I use FileZilla for all my FTP needs, but there are other open source solutions out there.
5. Include the CSS and JavaScript Files in your <head> Tags
Include the CSS and Javascript files inbetween your <head></head> tags.
<head>
<LINK REL="StyleSheet" HREF="AutoComplete/AutoComplete.css" TYPE="text/css" MEDIA="screen" />
<script type="text/javascript" src="AutoComplete/jquery.min.1.6.2.js"></script>
</head>
6. Add the Input Boxes to Your Form
Insert the HTML code into your form. As you will notice below, only three items are required to be changed in order to get this to work. They are highlighed in yellow in the code for Input 1 and in purple in the code for Input 2. The country and state text not only defines the Input id but also identifies which Table to query in the CD.php file.
The HTML Code for Input 1
<div>
<input type="text" size="30" value="" id="country" name="UserCountry" onkeyup="lookup(this);" onblur="fill();" /> <input type="Submit" value="Submit" name="Submit" disabled>
</div>
<div id="countrysuggestions" style="display: none;">
<img src="AutoComplete/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div id="countrySuggestionsList">
</div>
</div>
The HTML Code for Input 2 (and so forth)
<div>
<input type="text" size="30" value="" id="state" name="UserState" onkeyup="lookup(this);" onblur="fill();" /><input type="Submit" value="Submit" name="Submit" disabled>
</div>
<div id="statesuggestions" style="display: none;">
<img src="AutoComplete/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div id="stateSuggestionsList">
</div>
</div>
7: Add the JavaScript Code Before Your </body> Tag
1. Add the JavaScript before your closing </body> tag.
<script type="text/javascript">
function lookup(inputString) {
var t ="";
var u ="";
var z ="";
//You can also pass aditional variables and use php
// z="AutoComplete/CD.php?inputbox="+ inputString.id + "&tablename=<?php echo $tablename; ?>&colname=<?php echo $colname; ?>&companyid=<?php echo $companyid; ?>;
z="AutoComplete/CD.php?inputbox="+ inputString.id;
t= "#" + inputString.id + "suggestions";
u= '#' + inputString.id +'SuggestionsList';
if(inputString.value.length == 0) {
// Hide the suggestion box.
$(t).hide();
} else {
$.post(z, {queryString: ""+inputString.value+""}, function(data){
if(data.length >0) {
$(t).show();
$(u).html(data);
}
});
}
} // lookup
function fill(thisValue,thisName) {
var t = "";
t = "#" + thisName + "suggestions";
$('#'+thisName).val(thisValue);
setTimeout("$('"+t+"').hide();", 400);
}
</script>
8: Contact Me
Please contact me and let me know what projects you used this on, what complications you may have encountered, or what additions/improvements you’ve made to this script.