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

Discussion in 'Javascript' started by ravi kumar p, Jun 2, 2004.

  1. ravi kumar p

    ravi kumar p Guest

    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.selectedIndex;
    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.length != 0)
    /*if dropdown is not empty*/
    if (document.frmName.lstDropDown_First.options.selectedIndex
    == (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.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.length != 0)
    /*if dropdown is not empty*/
    if (document.frmName.lstDropDown_First.options.selectedIndex
    == (0))
    /*if option the Editable field i.e. the FIRST option */
    {
    document.frmName.lstDropDown_First.options[document.frmName.lstDropDown_First.options.selectedIndex].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.lstDropDown_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>
     
    ravi kumar p, Jun 2, 2004
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. linkswanted
    Replies:
    1
    Views:
    935
  2. QUASAR
    Replies:
    6
    Views:
    431
    QUASAR
    Jan 17, 2004
  3. K. Lobe

    How do I select item in <SELECT>

    K. Lobe, Jul 2, 2003, in forum: ASP General
    Replies:
    3
    Views:
    129
    K. Lobe
    Jul 2, 2003
  4. Replies:
    2
    Views:
    188
  5. Mr. Wilson
    Replies:
    3
    Views:
    237
Loading...

Share This Page