getting 'options' is null or not an object using autoComplete with dynamic dataset

[jdzemke]

I am getting 'options' is null or not an object using when using a dynamic dataset with a dropdown list in an html form. I am filling-in a text field and filtering the values in the drop-down. This functionality works with a fixed set of values in the drop-down (i.e. <option value tags). Any insight would be greatly appreciated.

  <INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.OBDataSet__135_1,'value',true)">
<select size="1" name="OBDataSet__135_1" onChange="this.form.input1.value=this.options[this.selectedIndex].value">
</select></td>
 
 
<script>
 
    function autoComplete (field, select, property, forcematch) {
    var found = false;
       alert("field " + field.value);
       // alert("select " + select.options[i][property]);
alert("property " + property);
alert("forcematch " + forcematch);
alert("index" + document.form1.OBDataSet__135_1.selectedIndex);
alert("text" + document.form1.OBDataSet__135_1.options[0].text);
    for (var i = 0; i < select.options.length; i++) {
       //for (var i = 0; i < 4; i++) {
    if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
        found=true; break;
        }
    }
    if (found) { select.selectedIndex = i; }
    else { select.selectedIndex = -1; }
    if (field.createTextRange) {
        if (forcematch && !found) {
            field.value=field.value.substring(0,field.value.length-1); 
            return;
            }
        var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
        if (cursorKeys.indexOf(event.keyCode+";") == -1) {
            var r1 = field.createTextRange();
            var oldValue = r1.text;
            var newValue = found ? select.options[i][property] : oldValue;
            if (newValue != field.value) {
                field.value = newValue;
                var rNew = field.createTextRange();
                rNew.moveStart('character', oldValue.length) ;
                rNew.select();
                }
            }
        }
    }
 
 
</script>
 

[iam_clint]

you can try using document.GetElementById
put an id on the select box and use the get element by id instead of document.form

this may fix your problem.

[jdzemke]

I appreciate you patience with this. Would you be willing to help me with the syntax of using your code with the code I have provided? I have tried GetElementById a few different ways, and continue to get errors.

[iam_clint]

Heres what I got for you bud, hope this helps you out let me know your results.

<INPUT TYPE="text" NAME="input1" id="input1" VALUE="" ONKEYUP="autoComplete(this,document.getElementById('OBDataSet__135_1'),'value',true)">
<select size="1" name="OBDataSet__135_1" id="OBDataSet__135_1" onChange="document.getElementById('input1').value=this.options[this.selectedIndex].value">
<option>Test</option>
<option>Apple</option>
<option>Candy</option>
<option>Corn</option>
</select></td>
 
 
<script>
 
    function autoComplete (field, select, property, forcematch) {
    var found = false;
//alert("index" + document.getElementById("OBDataSet__135_1").selectedIndex);
//alert("text" + document.getElementById("OBDataSet__135_1").options[0].text);
    for (var i = 0; i < select.options.length; i++) {
    if (select.options[i].text.toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
        found=true; 
                break;
        }
    }
    if (found) { select.selectedIndex = i; }
    else { select.selectedIndex = -1; }
    if (field.createTextRange) {
        var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
        if (cursorKeys.indexOf(event.keyCode+";") == -1) {
            var r1 = field.createTextRange();
            var oldValue = r1.text;
            var newValue = found ? select.options[i].text : oldValue;
            if (newValue != field.value) {
                field.value = newValue;
                var rNew = field.createTextRange();
                rNew.moveStart('character', oldValue.length) ;
                rNew.select();
                }
            }
        }
    }
 
 
</script>
 

[jdzemke]

Yes, the use of "options[i].text" vs. "options[i][property]" work. I very much appreciate the help. Can you tell me why this work?

-- new
select.options[i].text.toUpperCase().

-- old
select.options[i][property].toUpperCase()

[iam_clint]

i don't know what [Property] does or is so i removed it form the code and works like a charm... thats incorrect syntax.