Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to overwriter auto select of list item, to handle on change event

Reply
Thread Tools

How to overwriter auto select of list item, to handle on change event

 
 
ravi kumar p
Guest
Posts: n/a
 
      06-02-2004
I have a requirement as follows
I have a select, in which one of the item is editable. This is maily
to either to enter a value(using key board) or select on of the list
item.
While typing a character in editable item, if any list item is
starting with the pressed character, that particular item is getting
selected. Here I do not want to select that item rather just append
the typed character to editable item.
This auto select behaviour I have overwritten using onChange event.
When a character pressed and if any of the list item is starting with
that character, then assume this as due to key press in the editable
item. So append the character to editable item and set the selection
to editable item.

Could some one help how to write this.
My code is as followed.

<!--******* Start of "HTML" document *******-->
<HTML>

<HEAD>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

var PreviousSelectIndex_First = 0;
/* Contains the Previously Selected Index */

var SelectIndex_First = 0;
/* Contains the Currently Selected Index */

var SelectChange_First = 'MANUAL_CLICK';
/* Indicates whether Change in dropdown selected value */
/* was due to a Manual Click */
/* or due to System properties of dropdown */
var enteredKey;
/*Will holds the pressed key value*/

function checkkey(e){

if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;
enteredKey = e.keyCode;
//alert(e.keyCode);
/*if(keycode == 37){
fnLeftToRight(document.frmName.lstDropDown_First);
}
if(keycode == 39){
fnRightToLeft(document.frmName.lstDropDown_First);
}*/
if(keycode == 46){
fnDelete(document.frmName.lstDropDown_First);
}
if(keycode == 8 || keycode==127){
e.keyCode = '';
return true;
}
if(keycode == 9){
fnLeftToRight(document.frmName.lstDropDown_First);
}
}

/*------------------------------------------------
Functions required for Editable Dropdowns
-------------------------- */
function fnChangeHandler_First()
{
PreviousSelectIndex_First = SelectIndex_First;
/* Contains the Previously Selected Index */
/* Contains the Currently Selected Index */
if ((PreviousSelectIndex_First == (0)) &&(SelectChange_First !=
'MANUAL_CLICK'))
/* To Set value of Index variables*/
{
document.frmName.lstDropDown_First.options[0].selected=true;
document.frmName.lstDropDown_First.options[0].selected=false;
document.frmName.lstDropDown_First.blur();
document.frmName.lstDropDown_First.focus();
PreviousSelectIndex_First = SelectIndex_First;
SelectIndex_First =
document.frmName.lstDropDown_First.options.selecte dIndex;
SelectChange_First = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown selected
value was due to a Manual Click */
}
}
function fnKeyPressHandler_First(e)
{

if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;
if(document.frmName.lstDropDown_First.options.leng th != 0)
/*if dropdown is not empty*/
if (document.frmName.lstDropDown_First.options.select edIndex
== (0))
/*if option the Editable field i.e. the FIRST option */
{
var EditString =
document.frmName.lstDropDown_First.options[0].text;
/* Contents of Editable Option */
if (EditString == "")
/* On backspace on default value of Editable option make
Editable option Null */
EditString = "";
if ((keycode==8 || keycode==127))
/* To handle backspace */
{
EditString = EditString.substring(0,EditString.length-1);
/* Decrease length of string by one from right */

SelectChange_First = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown selected
value was due to a Manual Click */
}
/* Check for allowable Characters */
/*
The various characters allowable for entry into Editable
option..
may be customized by minor modifications in the code (if
condition below)
(you need to know the keycode/ASCII value of the character
to be allowed/disallowed.
*/
if ((keycode==46) || (keycode>47 && keycode<59)||(keycode>62
&& keycode<127) ||(keycode==32))
/* To handle addition of a character */
{
EditString+=String.fromCharCode(keycode);
/*Concatenate Enter character to Editable string*/

/* The following portion handles the "automatic Jump"
bug*/
/*
The "automatic Jump" bug (Description):
If a alphabet is entered (while editing)
...which is contained as a first character in one of
the read-only options
..the focus automatically "jumps" to the read-only
option
(-- this is a common property of normal dropdowns
..but..is undesirable while editing).
*/

var i=0;
var EnteredChar = String.fromCharCode(keycode);
var UpperCaseEnteredChar = EnteredChar;
var LowerCaseEnteredChar = EnteredChar;

if(((keycode)>=97)&&((keycode)<=122))
/*if EnteredChar lowercase*/
UpperCaseEnteredChar = String.fromCharCode(keycode -
32);
/*This is UpperCase*/

if(((keycode)>=65)&&((keycode)<=90))
/*if EnteredChar is UpperCase*/
LowerCaseEnteredChar = String.fromCharCode(keycode +
32);
/*This is lowercase*/

for (i=0;i<(document.frmName.lstDropDown_First.options .length-1);i++)
{ var ReadOnlyString =
document.frmName.lstDropDown_First.options[i].text;
var FirstChar = ReadOnlyString.substring(0,1);
if((FirstChar == UpperCaseEnteredChar)||(FirstChar ==
LowerCaseEnteredChar))
{
SelectChange_First = 'AUTO_SYSTEM';
alert("selected index is
"+document.frmName.lstDropDown_First.selectedIndex );*/
/* Indicates that the Change in dropdown selected
value was due to System properties of dropdown */
break;
}
else
{
SelectChange_First = 'MANUAL_CLICK';

/* Indicates that the Change in dropdown selected
value was due to a Manual Click */
}
}
}

/*Set new value of edited string into the Editable field */
document.frmName.lstDropDown_First.options[0].text =
EditString;
document.frmName.lstDropDown_First.options[0].value =
EditString;

return false;
}
return true;

}
/*--------------------------------------------------------------------------------------------
*/

function fnLeftToRight(getdropdown)
{
getdropdown.style.direction = "ltr";
}

function fnRightToLeft(getdropdown)
{
getdropdown.style.direction = "rtl";
}

function fnDelete(getdropdown)
{
if(document.frmName.lstDropDown_First.options.leng th != 0)
/*if dropdown is not empty*/
if (document.frmName.lstDropDown_First.options.select edIndex
== (0))
/*if option the Editable field i.e. the FIRST option */
{
document.frmName.lstDropDown_First.options[document.frmName.lstDropDown_First.options.selecte dIndex].text
= '';
}
}

</SCRIPT>

</HEAD>

<BODY>

<FORM name="frmName" method="post">

<SELECT name="lstDropDown_First" style="width:150px;"
onKeyDown="javascript:return checkkey(event)" onKeyPress =
"javascript:return fnKeyPressHandler_First(event);"
onChange="fnChangeHandler_First(this.form.lstDropD own_First)">

<OPTION id="EditMe_First" name="EditMe_First" value=""
selected></option>
<option>Sarvan</option>
<option>Patric</option>
<option>Comer</option>
<option>Charls</option>
</SELECT>
<input name="btn" type="Submit" value="Focus">

</FORM>

<!--******* End of "BODY" (of HTML document) *******-->
</BODY>
<!--******* End of "HTML" document *******-->
</HTML>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Auto Shipping Auto Shipping Scheduling:car moving auto transport linkswanted ASP .Net 1 11-22-2013 07:02 AM
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
select of select box will select multiple in another box palmiere Javascript 1 02-09-2004 01:11 PM



Advertisments