Pronunciation / adjective
Bringing something good and unforseen.
    Skip Navigation Links > Code Repository
   

Use more than one letter to select an entry from a drop down list



 
Return

Use more than one letter to select an entry from a drop down list

A drop down list with many similar entries in it can be very difficult for a user to navigate.

I have seen some drop down inventory lists where the entries number in the thousands and many entries are so similar that moving through them by hitting a letter would be impossible.

This code allows a user to focus on a drop down and type more than one character. (The entry that matches will automatically be selected.)

  1. <html>
  2. <head>
  3. <title>Javascript - Multi Character Entry Select Box </title>
  4. <!-----------------------------------------------------------------------------------------------
  5. JAVASCRIPT: Multi Character Entry Select Box 10/12/2001 JG
  6. Compatability:
  7. I.E. 5.0 or above only
  8. Comments:
  9. This javascript allows a user to enter more than one character in order to choose
  10. an entry from a select box.
  11. Copy all the code between the <script> & </script> tags and place it just after
  12. the <body> tag on your web page.
  13. It is necessary to give all of your form's elements both id and name tags (both should
  14. contain the same name.
  15. i.e. <form id="my_form" name="my_form">
  16. <input type="text" id="my_input" name="my_input">
  17. You must also add a hidden field to your form for the functions use. You may name the
  18. hidden field anything you like. In the example below I named it "receptacle".
  19. For each select box you would like to apply the javascript function's action to, you
  20. need to put two javascript events into the select box:
  21. 1) onfocus="clear_value(document.test.receptacle)"
  22. (This event clears the hidden field each time a user clicks on a select
  23. box getting ready for new input.)
  24. The value passed in parentheses is the javascript reference to the hidden
  25. input where test = the form's name and receptacle = the input field's name.
  26. The word document refers to the page itself and must not be changed.
  27. 2) onkeydown="return divert_entry(document.test.receptacle,document.test.any_select)"
  28. (This event performs the actual selection.)
  29. The values passed in parentheses are the javascript references to first the hidden
  30. input, where test = the form's name and receptacle = the input field's name,
  31. and second the select box itself where test = the form's name and any_select =
  32. the select box's name. The word document refers to the page itself and must not
  33. be changed.
  34. ------------------------------------------------------------------------------------------------->
  35. <script language="javascript">
  36. <!--
  37. function clear_value(oHidden_Field)
  38. {
  39. oHidden_Field.value = '';
  40. }
  41. function divert_entry(oHidden_Field,oDestination_Field)
  42. {
  43. var iKey;
  44. var eAny_Event = window.event;
  45. iKey = eAny_Event.keyCode;
  46. var sChr = String.fromCharCode(iKey);
  47. if (iKey == 13)
  48. {
  49. oHidden_Field.value = '';
  50. return true;
  51. }
  52. if (iKey == 8)
  53. {
  54. sDelete_Chr = oHidden_Field.value;
  55. oHidden_Field.value = sDelete_Chr .substring(0,oHidden_Field.value.length - 1);
  56. sChr = '';
  57. }
  58. oHidden_Field.value = oHidden_Field.value + sChr;
  59. lookupItem(oHidden_Field,oDestination_Field);
  60. if (document.all) eAny_Event.returnValue = false;
  61. }
  62. function lookupItem(oHidden_Field,oDestination_Field)
  63. {
  64. var sCurValue = oHidden_Field.value.toLowerCase();
  65. var bFound = false;
  66. var iIndex = oDestination_Field.selectedIndex;
  67. var iNumOptions = oDestination_Field.options.length;
  68. var iPos = 0;
  69. // Repeat until found or end of list is reached
  70. while ((!bFound) && (iPos < iNumOptions))
  71. {
  72. // Do comparisons in lowercase
  73. bFound = (oDestination_Field.options[iPos].text.toLowerCase().indexOf(sCurValue)==0) ;
  74. if (bFound)
  75. iIndex = iPos;
  76. iPos++;
  77. }
  78. if (bFound)
  79. // Updated listbox
  80. oDestination_Field.selectedIndex = iIndex;
  81. }
  82. //-->
  83. </script>
  84. <head>
  85. <body>
  86. <form action="test.htm" method="post" id="test" name="test">
  87. <table height="100%" width="100%">
  88. <tr>
  89. <td align="center" valign="center">
  90. <table>
  91. <tr>
  92. <td>
  93. <select id="any_select" name="any_select" onfocus="clear_value(document.test.receptacle)" onkeydown="return divert_entry(document.test.receptacle,document.test.any_select)">
  94. <option value="1">1</option>
  95. <option value="2">2</option>
  96. <option value="3">3</option>
  97. <option value="4">4</option>
  98. <option value="5">5</option>
  99. <option value="6">6</option>
  100. <option value="8">8</option>
  101. <option value="9">9</option>
  102. <option value="10">10</option>
  103. <option value="11">11</option>
  104. <option value="12">12</option>
  105. <option value="13">13</option>
  106. <option value="14">14</option>
  107. <option value="15">15</option>
  108. <option value="16">16</option>
  109. <option value="17">17</option>
  110. <option value="18">18</option>
  111. <option value="19">19</option>
  112. <option value="20">20</option>
  113. <option value="21">21</option>
  114. <option value="22">22</option>
  115. <option value="23">23</option>
  116. <option value="24">24</option>
  117. <option value="25">25</option>
  118. </select>
  119. <input type="submit" value="Go" id="submit" name="submit">
  120. </td>
  121. </tr>
  122. </table>
  123. </td>
  124. </tr>
  125. </table>
  126. <input type="hidden" id="receptacle" name="receptacle">
  127. </form>
  128. </body>
  129. </html>


Return
Microsoft Certified Professional   © 2018 Fortunate.  All rights reserved.
contact: justin@aboutfortunate.com