select option with text facility

View Answers

March 23, 2009 at 12:05 AM

Hi friend,

Code to help in solving the problem :

<HTML>
<HEAD>
<TITLE>Editable Dropdown / Listbox / Combobox - HTML, JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function keyDown(getdropdown, e)
{
checkFn(getdropdown);
var vEventKeyCode = keyCode(e);
// Press left/right arrow keys
if(vEventKeyCode == 37)
{
fnLeftToRight(getdropdown);
}
if(vEventKeyCode == 39)
{
fnRightToLeft(getdropdown);
}

// Delete key pressed
if(vEventKeyCode == 46)
{
fnDelete(getdropdown);
}

// backspace key pressed
if(vEventKeyCode == 8 || vEventKeyCode==127)
{
if(e.which) //Netscape
{
//e.which = ''; //this property has only a getter.
}
else //Internet Explorer
{
//To prevent backspace from activating the -Back- button of the browser
e.keyCode = '';
if(window.event.keyCode)
{
window.event.keyCode = '';
}
}
return true;
}

// Tab key pressed, use code below to reorient to Left-To-Right flow, if needed
//if(vEventKeyCode == 9)
//{
// fnLeftToRight(getdropdown);
//}
}

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

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

function fnDelete(getdropdown)
{
if(getdropdown.options.length != 0)
// if dropdown is not empty
{
if (getdropdown.options.selectedIndex == vEditableOptionIndex_A)
// if option the Editable field
{
getdropdown.options[getdropdown.options.selectedIndex].text = '';
getdropdown.options[getdropdown.options.selectedIndex].value = '';
}
}
}

March 23, 2009 at 12:06 AM

March 23, 2009 at 12:07 AM

<SCRIPT LANGUAGE="JavaScript">

var vEditableOptionIndex_A = 0;

var vEditableOptionText_A = "--?--";

var vPreviousSelectIndex_A = 0;

var vSelectIndex_A = 0;

var vSelectChange_A = 'MANUAL_CLICK';

function changeFn(getdropdown)
{
checkFn(getdropdown);

vPreviousSelectIndex_A = vSelectIndex_A;

vSelectIndex_A = getdropdown.options.selectedIndex;

if ((vPreviousSelectIndex_A == (vEditableOptionIndex_A)) && (vSelectIndex_A != (vEditableOptionIndex_A))&&(vSelectChange_A != 'MANUAL_CLICK'))

{
getdropdown[(vEditableOptionIndex_A)].selected=true;
vPreviousSelectIndex_A = vSelectIndex_A;
vSelectIndex_A = getdropdown.options.selectedIndex;
vSelectChange_A = 'MANUAL_CLICK';

}
}

function pressFn(getdropdown, e)
{
checkFn(getdropdown);

keycode = keyCode(e);
keychar = charKeyFn(e);

if ((keycode>47 && keycode<59)||(keycode>62 && keycode<127) ||(keycode==32))
{
var vAllowableCharacter = "yes";
}
else
{
var vAllowableCharacter = "no";
}

if(getdropdown.options.length != 0)

if (getdropdown.options.selectedIndex == (vEditableOptionIndex_A))

{

var vEditString = getdropdown[vEditableOptionIndex_A].value;

if((vAllowableCharacter == "yes")||(keychar=="backspace"))
{
if (vEditString == vEditableOptionText_A)
vEditString = "";
}
if (keychar=="backspace")
{
vEditString = vEditString.substring(0,vEditString.length-1);

vSelectChange_A = 'MANUAL_CLICK';

}

if (vAllowableCharacter == "yes")

{
vEditString+=String.fromCharCode(keycode);

var i=0;
var vEnteredChar = String.fromCharCode(keycode);
var vUpperCaseEnteredChar = vEnteredChar;
var vLowerCaseEnteredChar = vEnteredChar;

if(((keycode)>=97)&&((keycode)<=122))

vUpperCaseEnteredChar = String.fromCharCode(keycode - 32);

if(((keycode)>=65)&&((keycode)<=90))

vLowerCaseEnteredChar = String.fromCharCode(keycode + 32);

if(e.which)
{

for (i=0;i<=(getdropdown.options.length-1);i++)
{
if(i!=vEditableOptionIndex_A)
{
var vReadOnlyString = getdropdown[i].value;
var vFirstChar = vReadOnlyString.substring(0,1);
if((vFirstChar == vUpperCaseEnteredChar)||(vFirstChar == vLowerCaseEnteredChar))
{
vSelectChange_A = 'AUTO_SYSTEM';

break;
}
else
{
vSelectChange_A = 'MANUAL_CLICK';

}
}
}
}
}

// Set the new edited string into the Editable option
getdropdown.options[vEditableOptionIndex_A].text = vEditString;
getdropdown.options[vEditableOptionIndex_A].value = vEditString;

return false;
}
return true;
}

March 23, 2009 at 12:07 AM

March 23, 2009 at 12:08 AM

</HEAD>
<BODY>
<FORM name="selectFrm" method="post">
<center>
<br>
<SELECT name="user" id="user" style="" onKeyDown="keyDown(this, event);" onKeyUp="keyUpFn(this, event); return false;" onKeyPress = "return pressFn(this, event);" onChange="changeFn(this, event);">
<OPTION value=""></OPTION>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
</SELECT>
<br>
</center>
</FORM>
</BODY>
</HTML>

Thanks