Victor’s Programming Aid

On a web page form, one method to accept user input is with a single line text field. This allows for a visitor the freedom to input anything. But what if you want to give the visitor a set of options to choose from in addition to the freedom of inputting anything? That is what is commonly known as a auto complete text field. As a visitor types into the auto complete text field, a list of selectable options (similar to a drop down list) will appear. This method is similar, but not the same as a Combo Box.

The best way to create an auto complete text field is with JavaScript. There are many various websites out on the internet that offer an solution. My personal favorite script to use is one created by zichun called Auto Complete Control. Of the many controls I tries, I like this for the following reasons:

• It is free and use and download licensed under the Creative Common License
• It is easy to implement only requiring adding two JavaScript scrips
• Allows for many auto complete text field instances per page, each with many editable tweaks
• The auto complete options quickly appear as the visitor types

The JavaScript files can be downloaded as a single zip file from their official website at http://www.codeproject.com/KB/scripting/jsactb.aspx. As of the writing of this tutorial, the two required files are common.js and actb.js.

Now, for the step by step instructions on how to create a dynamic auto complete text field in PHP:

1. The first step is to create a blank php web page. For this tutorial, I am assuming that the file is called index.php located at the root of the site application (i.e. ‘/index.php’).
2. Next, we need to copy both common.js and actb.js to a location in the project. To keep third party JavaScript files organized, I like put all files into a subdirectory called library. From the library folder, I include another subdirectory by the name of the developer (i.e. ‘/library/actb/common.js’ and ‘/library/actb/actb.js’). We will again assume the JavaScript files have been placed into the corresponding folder structure.
3. Our next step is to include both scripts in the header of index.php. We do this with the following:

   <script type="text/javascript" src="library/actb/actb.js"></script>
   <script type="text/javascript" src="library/actb/common.js"></script>

4. Our next step is to create a text field on the index.php. In this step, we are simply creating a standard single line text field.

   <input type="text" name="state" id="state" value="" size="50" maxlength="50" />

5. In this example, our text field will be expecting a US State input with a pre-set selection of California, Nevada, New York, New Jersey, Oregon, Florida. Therefore, we will set our preset to these US States in a PHP string variable. The values in this PHP variable can be generated dynamically from a database just as long as you follow the format. Each variable should be surrounded by single quotes and comma seperated.

   <?php
   $states = "'California', 'Nevada', 'New York', 'New Jersey', 'Oregon', 'Florida'";
   ?>

6. Finally, we take our PHP string variable and insert it into the required auto complete text field JavaScript snippet. Note that this script must be created AFTER the text field is created.

   <script>
   var customarray = new Array(<?php echo $states; ?>);
   var obj = actb(document.getElementById('state'), customarray);
   </script>

And now you have a complete auto complete text field. If you want more than one auto complete text field, you will need to repeat Steps 4-6, substituting the values in color to other unique values. If you need more information, feel free to visit the official Auto Complete Control site or leave a comment.