Today is . Page created 01/07/07

Auto Auto-Complete Function II Functions

Just start typing a state of the United States.
You can use the mouse to select the state.


Once you start typing, it searches and gives you a drop-down list with autocompleted names.

We have tested the code in IE7.0, Firefox2.0.0.1, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with no variations observed.

For Your Information For your Information:     Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy (3) part copy and paste code that all parts go in the <BODY> section of your document. Two (2) parts are script and the third is the effect itself that needs to be incorporated into a working form.

For all intensive purposes, the only reconfigurations that can be made (which are cosmetic) are to the drop down box itself. Below are where and howto make these cosmetic reconfigurations. Just play areound with it until it fits your site. The below section of code is in the first <BODY> section of code near the beginning.

    if(txt != ""){
    var newList = "<table cellpadding=2 cellspacing=0 style='border:1px solid #000000' bgcolor='#ffffff' width=100%>";
    for(i=0;i<inpName.length;i++){
      var strpart = inpName.options[i].value.substr(0, txt.length)
      strpart = strpart.toLowerCase();
      if(strpart == txt){
        results = results + 1;
        var cellColor = " onmouseover=\"this.style.background='#eeeeee'\" onmouseout=\"this.style.background='#ffffff'\"";
        var cellClick = " onclick=\"filltxt('" + inpName.options[i].value + "')\"";
        newList += "<tr><td" + cellColor + cellClick + " style='cursor:pointer'>" + inpName.options[i].value + "</td></tr>";
      }
    }
    newList += "</table>";

The above reconfigurations that can be made are essentially to the dropdown box itself once you start typing into the form to find a state. The other reconfiguration is that of style='cursor:pointer'>. This has to do with what cursor will appear on mouseover once you start typing and a drop down box appear and you place your cursor over one of the selections. This can be changed to a several different cursors. If you grab the below link, there are the different cursors you can apply to this effect.
[ Fancy Custom Cursors ]

For Your Information For your Information:     On the above link(Fancy Custom Cursors), "Do Not" follow the instructions for adding the cursors. Those instructions are for adding span tags into different elements. Just replace the cursor name, nothing else. If this is a little unclear, see the below examples.

style='cursor:pointer'>
style='cursor:help'>
style='cursor:default'>
style='cursor:wait'>
style='cursor:crosshair'> 		Just place your cursor over any of the color coded words and see what we are explaining. These are only a few of the many different cursor effects you can add into this effect.

Add-On Not Included In Script Little Extra Not Included In The Script:     This is a rather large script to be placing into a form. You may want to consider making the entire script (after you make your reconfigurations to fit your form and site all three (3) parts into an external .js file and then you would only have to paste one line of code into the form and conserve space. This can be done quite easily since all three parts of the code are located in the <BODY> section and only require one (1) external .js file. If this is a little unclear first grab the below link and it is an example of this form effect being called from an external location by use of just one line of code.
[ External .JS File Method ]

Now that you have seen how little space the effect takes up in a form if you convert the entire code to an external file, you may be wondering how difficult will it be to convert all the code. Well.....we take all the work out of it by having a Converter/Generator that all you do is copy and paste the complete code into the converter, name your external file, cilck a button, paste the converted code into a notepad, name the notepad what you named the external file and then upload it into your directory. Now just paste the snipplet of code into your form and it is done. Grab the below link for our generater/converter and you are there.
[ Converter/Generator ]

On A Final Note     We do have one other script very similar to this one but it makes use of email addresses. If you would like to see that one, grab the below link and you are there.
[ Auto Complete Email addresses ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]