I have an HTC (Thanks to Beetle) that auto fills a field as a user key strokes letters into a text box. Except for one thing everything works great. The one thing is if a use types somethin in that is found, accepts it (tabs out of the field) the goes back to the first letter and trys to change the case (upper to lower or vise versa) it gets an error "invalid argument". I cannot seem to figure out why it would error. Below I have all of the code HTML and HTC should be easy to plug and play. Please let me know what you think.

Thanks


I have a test HTML page below to show the issue...

Code:
  
 
<STYLE TYPE="text/css">
 input.autoFill {
  behavior:url(auto_fill.htc)
 }
</STYLE>
<script language="JavaScript">
var vals = ['TEst Project','Developer Assist','Time Management','Developer Assist','email','Warranty','Meeting']
</script>
<FORM>
Running into the following problem when making a change to the selected value...
  
The textbox below uses the autoFill behavior. If the value is in the array ['TEst Project','Developer Assist','Time Management','Developer Assist','email','Warranty','Meeting']
(i.e. TEst Project) it comes up fine. The error occurs when you change the first letter 
i.e. once "TEst project" comes up use the mouse to highlight the "T" change it to lower case this
is where you will get the "invalid argument" error. I tracked it down to where the 
component calls this statement [found = tr.findText( element.value.replace( regex, "" ), -1 );]
<br>
I actually would like to stop the update process if the user goes back and changes something, like making the "T" lower case.
<br>
Has autoFill behavior : <INPUT class="autoFill" autocomplete="off" type="Text" name="txtSrProj_8" id="txtSrProj_8" maxlength="20" size="15" value="">
<BR>
I have tried several hacks the result was no error but the "t" went back to upper case. 
 
</FORM>
Name this file "auto_fill.htc" Thanks to Beetle for this code....

<<<<<< BEGIN auto_fill.htc >>>>>>>
Code:
  
<public:component>
 
 <public:attach event="onkeyup" onevent="keyHandler()" />
 <public:attach event="onkeydown" onevent="cancelEnter()" />
 <public:attach event="oncontentready" onevent="setCurrent()" />
 <public:attach event="onfocus" onevent="setCurrent()" />
 <public:attach event="onblur" onevent="checkForChange()" />
 
 <script language="JScript"> 
 
  // Reverse values
  var arr = vals.reverse();
  
  // Create TextRange object
  var tr  = element.createTextRange();
  
  String.prototype.toPattern = function()
  {
   return this.replace( /([\.\*\+\{\}\(\)\<\>\^\$\\])/g, "\\$1" );
  }
  
  // Other vars
  var currentVal;
  function setCurrent()
  {
   currentVal = element.value;
  }
  
  function checkForChange()
  {
   if ( element.value != currentVal )
   {
	element.onchange();
   }
  }
  
  function keyHandler()
  {
   
   // Quit if backspace key or arrow keys
   if ( /^(8|3[7-9]|40|46)$/.test( event.keyCode ) )
   {
	return;
   }
   
   // Quit if value empty
   if ( element.value == '' ) return;
   
   // Setup Variables   
   var sVal  = element.value
   var regex = new RegExp( "^" + sVal.toPattern(), "i" );
   var i  = arr.length
   var found = false
   
   // Loop through array
   while ( i-- > 0 )
   {
	
	// Look for value
	if ( regex.test( arr[i] ) )
	{
	 // Continue if full word match
	 if( element.value == arr[i] )
	 {
	  continue;
	 }
	 
	 // Set value to match
	 element.value = arr[i];
	 // if user replaces the first char need to skip
	 //if(element.value.replace( regex, "" )!=""){
	 // Select auto-filled portion
	 found = tr.findText( element.value.replace( regex, "" ), -1 );
	 //}
	 
	 if ( found )
	 {
	  tr.select();
	 }
	 
	 // Break from loop
	 break;
	}
   }
  }
  
  // Will cancel the enter-key event
  function cancelEnter()
  {
   if ( event.keyCode == 13 )
   {
	tr.collapse( false );
	tr.select();
	event.returnValue = false;
   }
  }
  
 </script> 
 
</public:component>
<<<<< END auto_fill.htc >>>>>

Thanks for your help!