Search the Community

<script type="text/javascript"> function listBoxSearch(){ var input = document.getElementById('searchBox'), output = document.getElementById('listBoxF'); if(input.value != ''){ for (var i = 0; i < output.options.length; i++){ if(output.options[i].text.substring(0, input.value.length).toUpperCase() == input.value.toUpperCase()){ output.options[output.options.length] = new Option(output.options[i].innerHTML, output.options[i].text); } } if (output.options.length == 1) { output.selectedIndex = 0; } } } </script> It dosen`t work. It should work like this[DEMO in attached filed] listbox_with_keybord_search.htm

optionsT Does not show any results.Dont know where is the problem. <script type="text/javascript" language="javascript"> function AddItemInList(fromLeftToRight, isAll){ var list1 = document.getElementById('listBoxF'); var list2 = document.getElementById('listBoxT'); if(Boolean(fromLeftToRight) == true){ MoveItems(list1,list2,isAll); }else{ MoveItems(list2,list1,isAll); } return false; } function MoveItems(listFrom, listTo, isAll){ var toBeRemoved = ""; if(listFrom.options.length > 0){ for (i=0; i<listFrom.length; i++){ if (listFrom.options[i].selected || (isAll == true)){ if(Exist(listTo, listFrom.options[i].value) == 0){ listTo[listTo.length] = new Option(listFrom.options[i].text, listFrom.options[i].value, true); toBeRemoved = toBeRemoved + listFrom.options[i].value + ';'; } } } ClearSelection(listTo); RemoveFromList(listFrom, toBeRemoved); }else{ alert('Unable to Move Items. List is Empty!'); } } function RemoveFromList(listFrom, items){ var toBeRemoved = items.split(';'); for (var i=0; i < toBeRemoved.length; i++){ for (var j = 0; j < listFrom.length; j++){ if (listFrom.options[j] != null && listFrom.options[j].value == toBeRemoved[i]){ listFrom.options[j] = null; } } } } function ClearSelection(list){ list.selectedIndex = -1; } function Exist(list, value){ var flag = 0; for (var i=0; i < list.length; i++){ if (list.options[i].value == value){ flag = 1; break; } } return flag; } </script> <?php $opt = isset($_POST['optionsT']) ? $_POST['optionsT'] : ''; if(!empty($_POST['submit'])){ print $opt; } print" <form method=\"POST\"> <table style=\"width:100%\"> <tr valign=\"top\"> <td>Options</td> <td> <select multiple size=\"5\" name=\"optionsF\" id=\"listBoxF\" style=\"width:350px\"> <option value=\"1\">1</option> <option value=\"2\">2</option> <option value=\"3\">3</option> <option value=\"4\">4</option> </select> <div align=\"center\"> <input type=\"button\" onclick=\"return AddItemInList(true,true)\" value=\"+ All\"> <input type=\"button\" onclick=\"return AddItemInList(true,false)\" value=\"+\"> <input type=\"button\" onclick=\"return AddItemInList(false,false)\" value=\"-\"> <input type=\"button\" onclick=\"return AddItemInList(false,true)\" value=\"- All\"> </div> <select multiple size=\"5\" name=\"optionsT[]\" id=\"listBoxT\" style=\"width:350px\"> </select> </td> </tr> <tr> <td></td> <td><input type=\"submit\" name=\"submit\" value=\"Submit\"></td> </tr> </table> </form>"; ?>