使用javascript编辑滑动html菜单

我使用的是一个滑动菜单select/objecthtmlone，它是通过使用jsp页面从数据库获取数据动态生成的

我还有一个输入文本字段，可以从滑动菜单中搜索内容。 我想写我的菜单中包含的单词的词根，我的菜单必须调整大小，以显示我所写的所有具有词根的项目，并且只显示那些项目

我不能使用服务器端操作，比如通过post发送数据，但我需要解决这个客户端问题，因为我需要立即得到这个结果

我是否可以仅通过对按钮应用onclick事件来解决此问题？怎么做呢？

请看此演示：

由于无法隐藏with display:none demo:-样式已正确添加，但不起作用，因此我克隆了“选择对象”以存储初始选项，因为它们将从初始对象中删除。稍后，我将使用克隆的对象来筛选选项，并将符合我的条件的选项添加到初始对象。下面是一个代码：

HTML:

---

​

谢谢你的精彩回放。目前，我真的不知道我键入的文本将如何过滤我的列表。我确实像你说的那样，但是当我键入时，列表被清除，当我键入正确的内容时，没有选项出现。我做错了什么？@abierto-如果你想得到一些帮助-显示你的代码。你复制粘贴了HTML和JS吗？JS代码在哪里？有一些修改吗？我怎么知道这些？你说得对，但现在我解决了，谢谢你；太糟糕了，textContent在IE8及以下版本上不起作用，只有innerText和innerHTML起作用。。它们太慢了，因为我的列表中有太多的元素，更新需要30秒。。。

<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)" />​

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[i];
        if((opt.innerText || opt.textContent).indexOf(el.value) != -1) {
            select.appendChild(opt.cloneNode(true));
        } 
    }
}