Real time edit sliding html menu

[mfsohail]

I'm using a sliding menu (select/object html one), which is generated dynamically by taking data from a DB, using a jsp page.I also have an input text field, where I can search things from the sliding menu. I want to write the root of a word that is contained in my menu, and my menu must "resize" showing all the items with the root that I've wrote, and only those ones.I can't use server side operations (like sending data via post) but I need to solve this client side (because I need this result immediately).I've actually solved this issue using javascript, but I have some performance problems with this solution, because i have to use IE 8.Is there any similar solution using JQuery or Ajax?Here is something similar to my code:HTML:\[code\]<select multiple id="testSelect"> <option>test</option> <option>temp</option> <option>cast</option> <option>dest</option> <option>inst</option></select><input type="text" value="" onkeyup="searhSelect(this)" />?\[/code\]searhSelect function will be called on each key press (when user release a key actually) and will filter #testSelect object.JS:\[code\]var optionsList;function searhSelect(el) { var select = document.getElementById('testSelect'); if(!optionsList) { optionsList = select.cloneNode(true); //copy select to a variable for future use } select.innerHTML = "";//remove all options. for(var i =0; i < optionsList.options.length; i++) { var opt = optionsList.options; if(opt.innerHTML.indexOf(el.value) != -1) { select.appendChild(opt.cloneNode(true)); } }}\[/code\]