onKeyUp function not returning all results

Question

Background - I have a form with a text field. The user enters 2-6 digit integers. On each key stroke, the javascript function is called matching up values from a dropdown.

My text field:

<input type="text" name="orgSICCode" value="" allownull="FALSE" size="5" maxlength="10" datatype="dtNumeric" onKeyUp="ActivateOption(description,this.value);" onBlur="this.value = description.options[description.selectedIndex].value;" emsg="Must choose a SIC Code before you can continue.">

My dropdown field:

    <select name="description" STYLE="width:275px;" onChange="orgSICCode.value = this.options[this.selectedIndex].value;sic_code_description.value = this.options[this.selectedIndex].text;">
       <option value="">Select One ...</option>
       <option value="085101">085101 - Forest management services</option>
       <option value="0831">0831 - Forest Products</option>
       <option value="083100">083100 - Forest products</option>
       <option value="083199">083199 - Forest products, nec</option>
       <option value="08">08 - Forestry</option>
    </select>

My javascript function ActivateOption:

function ActivateOption(selectObj, strValue) {
   for(var idx=0;idx<selectObj.options.length;idx++) {
      if(selectObj.options[idx].value.substring(0,strValue.length) == strValue) {
        selectObj.selectedIndex = idx;
        return true;
      }
   }
   selectObj.selectedIndex = 0;
   return false;
}

When a user types '08', the first option that should populate is the 08 value, "08 - Forestry" option. The option that does populate is '085101', '085101 - Forest Management services'.

Am I doing something wrong?

Thanks.

Answer 1

use a better filter to check the option string

// this function return the most similer string, 
// sarr take a string arr which to filte

function checkString ( sarr, srcStr ) {
    var ret = "", val = 0, srcStr = srcStr.split("");
        sarr.forEach( function  ( content, index  ) { 
            var i, l, curval = 0, cont = content.split("");
            for ( i = 0, l = cont.length; i < l; i += 1 ){
                if ( cont [i] === srcStr[i] ){
                    curval += Math.pow ( 10, i );
                } else {
                    break;
                }
            }
            if ( curval > val ){
                val = curval;
                ret = content;
            } else if ( curval === val && Math.abs ( content.length - srcStr.length ) < Math.abs ( ret.length - srcStr.length ) ){
                ret = content;
            }
        })
        return ret; 
}

Answer 2

Because you are returning true for the first item that starts with strValue, your dropdown will be set to the first matching item - not the item with the best match.

Try:

function ActivateOption(selectObj, strValue) {
   selectObj.selectedIndex = 0;
   for(var idx=0;idx<selectObj.options.length;idx++) {
      if(selectObj.options[idx].value.substring(0,strValue.length) == strValue) {
        selectObj.selectedIndex = idx;
      }
   }
}