New Info

Open for Business

We are now open for business in the Dallas area. If you are outside this area, please check back for expanded coverage.

Demo - ukiAutoComplete

ukiAutoComplete is a simple AJAX application that queries a mysql database to come up with suggestions to help the user autocomplete the text field. With each key pressed it gets results matching the current letters displayed.

ukiAutoComplete is made up of a javascript file, php files, and a css file.

• ukiAutoComplete.js - Stores the functions to handle moving, closing, and populating the popup window.
• ukiAutoComplete.php - Is called from javascript to populate the popup window.
• ukiAutoComplete.css - Style sheet to control the way the popup window appears

If you want to use this code you can download the zip file: ukiAutoComplete.zip. Just unzip this into your webserver directory. Then put the following line in the head section of your html:

  <link href="ukiAutoComplete.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="ukiAutoComplete.js"></script>
  

Then adjust your text field you want to autocomplete to look like the following:

  <form>
    <input type="text" id="search_txt" name="search_txt" 
        onkeyup="ukiAutoComplete(this);" />
  </form>
   

For this demo I created a simple database with two fields(lname and fname). The demo searches the lname field of the database with the letters entered into the text field. To adjust the script to fit your needs you would just need to edit the ukiAutoComplete.php file. At a minimum you would need to change the following lines:

   include("/path/to/database/include/script/uki_demos_db.php");
   $table_name = "ukiAC_demo";
  

You would need to change these lines to match the location of your database connection information and that name of the table you used to store your info.

If you want the look of the autocomplete to fit in more with your own design you can just edit the ukiAutoComplete.css file.

*Note: Use this code at your own risk.* If you find any bugs please email us and let us know. Feel free to use these scripts for your personal use. If you use it commercially or to make money, please send a donation for our efforts. Thank you for all your support!