Autocomplete better

[bonneylake]

Hey Everyone,

Right now i have a script where when someone starts typing in the input field that it populates the drop down box next to it. Once both the input and drop down box have the same number then it autofills the rest of the form. This works great. But now i have realized that lets say i have a previous entry of a00092 but i am creating a new entry an it is a0 Instead of the drop down box going blank since the input don't match the drop down box, the drop down box remains a00092. If i keep typing past a0 with more values like a02 it will make the drop down box blank, but if i stop at a0 it will leave the drop down box with a value.
I was wondering if there was a way to make sure that if i have a0 in the the field an i go an click off of it or click on another field or someway to make it where that once i continue to fill out the form that the drop down box will not continue to say a00092 an will instead go blank.

Here is the html

Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONkeyup="autoComplete(this,this.form.customer,'value',false)"/>
<SELECT NAME="customer" id="options"
onChange="this.form.custnum.value=this.options[this.selectedIndex].value;">
<option value="" selected></option>
<cfoutput query="getcustnum">
<option value="#fk_custNum#">#fk_custNum#</option>
</cfoutput>
</SELECT>

javascript that appears on html page.

<SCRIPT LANGUAGE="JavaScript" SRC="autocomplete.js"></SCRIPT>
    <script type="text/javascript" src="autofill.js"></script>
<script type="text/javascript">
 
var ajax = new sack();
    var currentClientID=false;
    function getClientData()
    {
        var clientId = document.getElementById('clientID').value;
        var customer = document.getElementById('options').value;
        if (clientId != "" && customer != "") {
            currentClientID = clientId
            ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
            ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
            ajax.runAJAX();        // Execute AJAX function            
    }}
 
 
 
 
 
    function showClientData()
    {
        var formObj = document.forms['page1'];
        var resp = ajax.response.split(",");
 
      if (ajax.response == "") { // you may want to trim here just in case
          formObj.cust_company.value = "";
          formObj.fname.value = "";
          formObj.lname.value = "";
          formObj.add1.value = "";
          formObj.city.value = "";
          formObj.state.value = "";
          formObj.zip.value = "";
          formObj.email.value = "";
          formObj.pri_phone.value = "";
          formObj.sec_phone.value = "";
          formObj.notes.value = "";
 
      } else {
          var resp = ajax.response.split(",");
          formObj.cust_company.value = resp[1];
          formObj.fname.value = resp[2];
          formObj.lname.value = resp[3];
          formObj.add1.value = resp[4];
          formObj.city.value = resp[5];
          formObj.state.value = resp[6];
          formObj.zip.value = resp[7];
          formObj.email.value = resp[8];
          formObj.pri_phone.value = resp[9];
          formObj.sec_phone.value = resp[10];
          formObj.notes.value = resp[11];
      }
    }
</script>

autocomplete.js this autocomplets the form

function autoComplete (field, select, property, forcematch) {
    var found = false;
    for (var i = 0; i < select.options.length; i++) {
    if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
        found=true; break;
        }
    }
    if (found) { select.selectedIndex = i; }
    else { select.selectedIndex = -1; }}

autofill.js this autofills the form

function sack(file) {
    this.xmlhttp = null;
 
    this.resetData = function() {
        this.method = "POST";
          this.queryStringSeparator = "?";
        this.argumentSeparator = "&";
        this.URLString = "";
        this.encodeURIString = true;
          this.execute = false;
          this.element = null;
        this.elementObj = null;
        this.requestFile = file;
        this.vars = new Object();
        this.responseStatus = new Array(2);
      };
 
    this.resetFunctions = function() {
          this.onLoading = function() { };
          this.onLoaded = function() { };
          this.onInteractive = function() { };
          this.onCompletion = function() { };
          this.onError = function() { };
        this.onFail = function() { };
    };
 
    this.reset = function() {
        this.resetFunctions();
        this.resetData();
    };
 
    this.createAJAX = function() {
        try {
            this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
            try {
                this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                this.xmlhttp = null;
            }
        }
 
        if (! this.xmlhttp) {
            if (typeof XMLHttpRequest != "undefined") {
                this.xmlhttp = new XMLHttpRequest();
            } else {
                this.failed = true;
            }
        }
    };
 
    this.setVar = function(name, value){
        this.vars[name] = Array(value, false);
    };
 
    this.encVar = function(name, value, returnvars) {
        if (true == returnvars) {
            return Array(encodeURIComponent(name), encodeURIComponent(value));
        } else {
            this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
        }
    }
 
    this.processURLString = function(string, encode) {
        encoded = encodeURIComponent(this.argumentSeparator);
        regexp = new RegExp(this.argumentSeparator + "|" + encoded);
        varArray = string.split(regexp);
        for (i = 0; i < varArray.length; i++){
            urlVars = varArray[i].split("=");
            if (true == encode){
                this.encVar(urlVars[0], urlVars[1]);
            } else {
                this.setVar(urlVars[0], urlVars[1]);
            }
        }
    }
 
    this.createURLString = function(urlstring) {
        if (this.encodeURIString && this.URLString.length) {
            this.processURLString(this.URLString, true);
        }
 
        if (urlstring) {
            if (this.URLString.length) {
                this.URLString += this.argumentSeparator + urlstring;
            } else {
                this.URLString = urlstring;
            }
        }
 
        // prevents caching of URLString
        this.setVar("rndval", new Date().getTime());
 
        urlstringtemp = new Array();
        for (key in this.vars) {
            if (false == this.vars[key][1] && true == this.encodeURIString) {
                encoded = this.encVar(key, this.vars[key][0], true);
                delete this.vars[key];
                this.vars[encoded[0]] = Array(encoded[1], true);
                key = encoded[0];
            }
 
            urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
        }
        if (urlstring){
            this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
        } else {
            this.URLString += urlstringtemp.join(this.argumentSeparator);
        }
    }
 
    this.runResponse = function() {
        eval(this.response);
    }
 
    this.runAJAX = function(urlstring) {
        if (this.failed) {
            this.onFail();
        } else {
            this.createURLString(urlstring);
            if (this.element) {
                this.elementObj = document.getElementById(this.element);
            }
            if (this.xmlhttp) {
                var self = this;
                if (this.method == "GET") {
                    totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
                    this.xmlhttp.open(this.method, totalurlstring, true);
                } else {
                    this.xmlhttp.open(this.method, this.requestFile, true);
                    try {
                        this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
                    } catch (e) { }
                }
 
                this.xmlhttp.onreadystatechange = function() {
                    switch (self.xmlhttp.readyState) {
                        case 1:
                            self.onLoading();
                            break;
                        case 2:
                            self.onLoaded();
                            break;
 
                        case 3:
                            self.onInteractive();
                            break;
                        case 4:
                            self.response = self.xmlhttp.responseText;
                            self.responseXML = self.xmlhttp.responseXML;
                            self.responseStatus[0] = self.xmlhttp.status;
                            self.responseStatus[1] = self.xmlhttp.statusText;
 
                            if (self.execute) {
                                self.runResponse();
                            }
 
                            if (self.elementObj) {
                                elemNodeName = self.elementObj.nodeName;
                                elemNodeName.toLowerCase();
                                if (elemNodeName == "input"
                                || elemNodeName == "select"
                                || elemNodeName == "option"
                                || elemNodeName == "textarea") {
                                    self.elementObj.value = self.response;
                                } else {
                                    self.elementObj.innerHTML = self.response;
                                }
                            }
                            if (self.responseStatus[0] == "200") {
                                self.onCompletion();
                            } else {
                                self.onError();
                            }
 
                            self.URLString = "";
                            break;
                    }
                };
 
                this.xmlhttp.send(this.URLString);
            }
        }
    };
 
    this.reset();
    this.createAJAX();
}
 

Thank you in advance,
Rach

[rnd me]

the earlier an autocomplete suggests something, the more useful it is.

with a00092, a0 does indeed match something, perhaps more than one.

when would you want to clear it?
possibiblities include when the input is cleared, upon hitting backspace, etc.

if all the numbers are the same length, you could not fire the routine until the input's value is long enough, but would that still be helpful?

it should be easy enough to do, i just don't know where/when to do it.

[bonneylake]

Hey rnd me,

Thank you for your response. Well the main issue i am having is that basically like in my example if the user who is typing in the input field leaves it a0 then it will leave the drop down box a00092. The only way to get rid of the drop down box value is by continuing to type till the input field don't match the drop down box. I also figured out if you put a space after the a0 that it will go away. I was thinking that once the user clicks in the first name field that it would make the drop down box empty if the values for input and drop down box don't match, its the only way i can think to do it.

The only concern i have is i am afraid the user will try to go to the drop down box an try to select a empty field in fear that if they leave it saying a00092 that it will put whats in a00092 instead of what there currently typing it. But i also have some who know how to use a computer an will just go straight to first name an leave the drop down box alone. Is there away to make it where the user goes away from input that it will make drop down blank an when the user goes to type in first name?

Thank you,
Rach

[rnd me]

after quite a bit of thinking about it, and reviewing the code, it seems that the behavior is actually correct in it's current shape.

clearing the selection in the drop-down removes some of its utility.
you are currently hitting partial matches, which i think is to be expected.

i have struggled with a related problem myself.
eventually i figured out that the best thing to do was to re-label my controls.
i made it obvious with words, colors, and font size that the drop down was a "ez preset". make it look smaller and less important. make sure to use the word preset, so people won't think that it is the important control. i also set the select's tabindex="-1" to prevent keyboard control, again to de-emphasize its importance.

also you can make it apperent that the text input is required, and perhaps validate it before allowing the user to move on.


let me know if this makes any sense.

[bonneylake]

Hey rnd me,

You do make perfect since. An i wish it was as easy as changing font, size an color to make them understand that the drop down box is not nearly as important. However, i don't got the smartest tools in the shed. For one project to try to get people to understand we made the font size 30, bold and red and they still didn't understand that! With the text input i do have it validate now before they submit. The problem i am having is that basically although the input box an drop down box don't match the drop down box still has its value. An i know that they will try to change the drop down box to blank. An there wont be a blank value in there an then all get calls. Also eventually if i did have a blank value in there for them to choose they would eventually complain about having to choose the blank value an say well it should go blank automatically for me.Is there anyway to make the drop down box go blank once they click on another field or do something? i am afraid leaving it the way it is would confuse the users.

an i am also noticing another problem. If i type in the customer number a0009 an go an select the drop down box which is showing a00092 . It wont make the input box change from a0009 to a00092 (if i go to select a00092 from the drop down box). If i just go straight to the drop down box (an don't type anything into input) an select a00092 it will fill in the input field just fine.Is there anyway to make it where i select the value from the drop down box that it will overwrite the value that is in the input field?

Thank you,
Rach

[rnd me]

sounds frustrating, programming would be a lot easier without pesky users getting in the way, i feel your pain.

Hey rnd me,

.Is there anyway to make the drop down box go blank once they click on another field or do something? i am afraid leaving it the way it is would confuse the users.

you can use the onfocus event of the name input to verify a match between combo and input:
i don't see the code for that particular input, but here's what you need to add to the tag:

onfocus="var userVal = this.form.custnum.value; var dropVal =this.form.options.options[this.form.options.selectedIndex].value; if( userVal != dropVal ){ alert('please enter a valid customer number'); this.form.custnum.focus(); }"

whew! i think that should work, though i didn't test it.
what it does?

grabs the cust number input's value, and the drop down value. if they aren't the same, complain and return focus to the cust number input.

Is there anyway to make it where i select the value from the drop down box that it will overwrite the value that is in the input field?

it will only replace it when the selected option changes from one value to another.
you could manually fire it by adding to the select tag: onclick="this.onchange();".
this is force the update every time the select if used.





hope this helps you out.

[bonneylake]

sounds frustrating, programming would be a lot easier without pesky users getting in the way, i feel your pain.


you can use the onfocus event of the name input to verify a match between combo and input:
i don't see the code for that particular input, but here's what you need to add to the tag:

onfocus="var userVal = this.form.custnum.value; var dropVal =this.form.options.options[this.form.options.selectedIndex].value; if( userVal != dropVal ){ alert('please enter a valid customer number'); this.form.custnum.focus(); }"

whew! i think that should work, though i didn't test it.
what it does?

grabs the cust number input's value, and the drop down value. if they aren't the same, complain and return focus to the cust number input.






it will only replace it when the selected option changes from one value to another.
you could manually fire it by adding to the select tag: onclick="this.onchange();".
this is force the update every time the select if used.





hope this helps you out.

Hey rnd me,

Its very frustrating. Especially since there in there 20's! I mean i could understand someone in there 30's or 40's having trouble with a form. But someone in there 20's seems wrong. But anyway i ended up applying the onfocus to my insert contact button. I realized that if i make them match an go to company name all run into problems because users can add new customer numbers that don't already exist. An the onclick works wonderful :).

I know we discussed this but is there a way to make the drop down field go blank if the drop down box don't match the input field?it just seems really weird to look at the customer number (input field) saying a0009 and the drop down box saying a00092 or what would you recommend saying to them so they wouldn't get confused? Basically the customer number an drop down field have to match to add a user that already exists but if a user don't exist then don't have to match since don't have to insert. Not sure how to say that without being wordy which is why wanted to just make drop down field go blank. I am just afraid there get confused .

Thank you for all the help :),
Rach

[rnd me]

I know we discussed this but is there a way to make the drop down field go blank if the drop down box don't match the input field?
Thank you for all the help :),
Rach

sure. forgot about that part.

revision of code i posted last time:

onfocus="var userVal = this.form.custnum.value; var dropVal =this.form.options.options[this.form.options.selectedIndex].value; if( userVal != dropVal ){ this.form.options.selectedIndex=0; alert('please enter a valid customer number'); this.form.custnum.focus(); }"

i added "this.form.options.selectedIndex=0" to reset the combo before the complaint box comes up. this assumes the first choice is blank, as thats what seems to be the case from the code you posted. you could use -1 instead of zero to really clear it out. i know -1 works in firefox, not sure about ie.

you could probably remove the alert if it's annoying. it would then just pop users back to customer number if invalid.

[bonneylake]

Hey rnd me,

That works perfectly! Thank you for all the help!!!!

Rach

[rnd me]

hey no prob.

forms are like othello: a minute to learn and a lifetime to master.
i bet they cause more headache than any other aspect of web dev.
my favorite form trick is seeing all the fields blank when i hit back. that's fun.

anyways, glad to hear everything is working.

ya'll come back now, ya hear?

[bonneylake]

Hey rnd me,

Yes that is so true! I was going to say that shopping carts probably cause more headaches, but shopping carts are made up of forms so yes you are right :). But thank you again for all your help an trust me all be back :).

Thank you again,
Rach