I need to control the cursor position in a textbox to do this, does anyone know how to place the cursor in the textbox at a particular position
[font=Tahoma][size=2][color=#000080]The functionality I am looking for…
Excel provides data entry help based on previous entries i.e. if in a previous cell in a column I entered “Jim Bob” then the next cell I type a “J” Excel provides help by showing “Jim Bob” in a way that allows me to pick it or keep typing. This is the kind of functionality I am trying to get using JS.
In the code below I create an array of previous entries by the user over the last 45 days this all comes from a DB but that’s not important here. When the user enters a key in the textbox I can pop the text box with a matching value from the array, only up to the chars entered.
The Problem or Question:
Is there a way to place the curser back into the last position and highlight the remaining part of the match from the array?
This is really hard to explain but if you ever used Excel you may have an idea of what I am trying to do.
[color=seagreen]<SCRIPT LANGUAGE=“JavaScript”>
SRDataArray=new WddxRecordset();_t2=new Array();_t2[0]=566;_t2[1]=586;_t2[2]=708;_t2[3]=713;_t2[4]=727;_t2[5]=1093;_t2[6]=1495;_t2[7]=1831;_t2[8]=2;_t2[9]=4;_t2[10]=6;_t2[11]=7;_t2[12]=8;_t2[13]=9;_t2[14]=11;_t2[15]=12;_t2[16]=13;_t2[17]=14;_t2[18]=16;_t2[19]=17;_t2[20]=18;_t2[21]=2163;SRDataArray[“rowid”]=_t2;_t2=new Array();_t2[0]=“2002080074P”;_t2[1]=“2002080074W”;_t2[2]=“2002080132A”;_t2[3]=“2002080134A”;_t2[4]=“2002090007A”;_t2[5]=“2002100089A”;_t2[6]=“2002120036A”;_t2[7]=“2003010138A”;_t2[8]=“Authorized Time Off”;_t2[9]=“Death in Family”;_t2[10]=“Diversity Day”;_t2[11]=“Floating Holiday”;_t2[12]=“Holiday”;_t2[13]=“Illness”;_t2[14]=“Jury Duty”;_t2[15]=“Leave of Absence”;_t2[16]=“Long Term Disability”;_t2[17]=“Management Time Off”;_t2[18]=“Short Term Disability”;_t2[19]=“Unauthorized Absence”;_t2[20]=“Vacation”;_t2[21]=“as”;SRDataArray[“sr_number”]=_t2;_t2=new Array();_t2[0]=“All work associated with Imations/DSS acquisition”;_t2[1]=“All work associated with Imations/DSS acquisition”;_t2[2]=“Move the bid process currently on LARK to the corp”;_t2[3]=“Rogue web site to be added to DecisionOne corporat”;_t2[4]=“Transportation web page updated and working”;_t2[5]=“Zip Code List”;_t2[6]=“DSS WEBPAGE PROBLEM”;_t2[7]=“Update the current program used to load airbill nu”;_t2[8]=“Authorized Time Off”;_t2[9]=“Death in Family”;_t2[10]=“Diversity Day”;_t2[11]=“Floating Holiday”;_t2[12]=“Holiday”;_t2[13]=“Illness”;_t2[14]=“Jury Duty”;_t2[15]=“Leave of Absence”;_t2[16]=“Long Term Disability”;_t2[17]=“Management Time Off”;_t2[18]=“Short Term Disability”;_t2[19]=“Unauthorized Absence”;_t2[20]=“Vacation”;_t2[21]=“as”;SRDataArray[“brief_desc”]=_t2;_t0=null;_t1=null;_t2=null;
function textHelp(fld,n){
// As a user enters letters display the closest value to it from previous history.
var fldValue = fld.value;
var updateTxtField = eval(“document.all.txtDesc_” + n);
for (var iLoop=0; iLoop < SRDataArray.rowid.length; iLoop++){
[iLoop].substring(0,fldValue.length));
// Based on the current pos of the curser in the textbox, select the first match
if(fldValue==SRDataArray.sr_number[iLoop].substring(0,fldValue.length) ){
fld.value=SRDataArray.sr_number[iLoop]
updateTxtField.value = SRDataArray.brief_desc[iLoop];
iLoop=SRDataArray.rowid.length;
}
}
}
I think what you did will work for a text area. We were looking for the same functionality in a textbox. I’ll give it a try though. Thanks for your help!
Okay, cool. Then I can do this with a DHTML-behavior. Heck, you could even do this with and XML data island. Hmmm, the possibilites in a static browser environment…
I have found no way to determine the position of a curser in a text box using DHTML/JS. This would be necessary to determine what words to display. In fact IE will display help in the form of a drop down, in a textbox. It displays values entered in the past. This is similar to what I want to do.
<html>
<head>
<title>Test</title>
<style type="text/css">
input.autoFill {
behavior:url(auto_fill.htc)
}
</style>
<script type="text/javascript">
var vals = ['abcd','abdd','acaa','acad'];
</script>
</head>
<body>
<form>
<input type="text" class="autoFill" />
<br />
Below are the values in the javascript array
<br /><br />
abcd<br />
abdd<br />
acaa<br />
acad
</form>
</body>
</html>
Now the HTC (this is the DHTML Behavior)
<public:component>
<public:attach event="onkeyup" onevent="keyHandler()" />
<public:attach event="onkeydown" onevent="cancelEnter()" />
<script language="JScript">
// Reverse values
var arr = vals.reverse();
// Create TextRange object
var tr = element.createTextRange();
function keyHandler()
{
// Quit if backspace key or arrow keys
if ( /^(8|3[7-9]|40)$/.test( event.keyCode ) )
{
return;
}
// Quit if value empty
if ( element.value == '' ) return;
// Setup Variables
var sVal = element.value
var i = arr.length
var regex = new RegExp( "^" + sVal, "i" );
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];
// 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>
This is strange (to me anyway), why would the other events associated with the text box using the component above not fire. For instance when the onchange event is fired a function is called and another field is populated based on the value on the value of the field that fired the event.
It is a lot of code that has nothing to do with this so I created this small piece of HTML the shows the onchange event never gets fired if the “autoFill” behavior is used.
…HTML START…
<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’]
function checkfunctionfired(evt){
alert(evt+“function fired!”)
}
</script>
<FORM>
1 Uses the autoFill behavior. If the value is in the array (i.e. TEst Project) the onchange event is cancled onblur still works.
<BR>
1.) Has autoFill behavior : <INPUT class=“autoFill” onblur=“checkfunctionfired(‘onBlur 1’)” autocomplete=“off” type=“Text” ONCHANGE=“checkfunctionfired(‘onChange 1’)” name=“txtSrProj_8” id=“txtSrProj_8” maxlength=“20” size=“15” value=“”>
<BR>
<BR>
2 Does not use the autoFill behavior. Both events onBlur and on Change work.
<BR>
2.) No autoFill behavior : <INPUT onblur=“checkfunctionfired(‘onBlur 2’)” autocomplete=“off” type=“Text” ONCHANGE=“checkfunctionfired(‘onChange 2’)” name=“txtSrProj_9” id=“txtSrProj_9” maxlength=“20” size=“15” value=“”>
</FORM>
…HTML END…
