javascript - 使用 javascript 编辑滑动 html 菜单

Question

我正在使用一个滑动菜单（选择/对象 html 之一），它是通过使用 jsp 页面从数据库中获取数据而动态生成的。

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

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

我可以仅通过将 onclick 事件应用于按钮来解决此问题吗？如何？

Answer 1

看到这个演示：http: //jsfiddle.net/UKseV/8/

由于无法隐藏<option>with display:none（演示： http: //jsfiddle.net/UKseV/ -style 已正确添加，但它不起作用），我克隆选择对象以存储初始选项，因为它们将从初始选项中删除目的。后来我使用该克隆对象来过滤选项并将符合我条件的选项添加到初始对象。这是一个代码：

HTML：

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

searhSelect每次按键时都会调用函数（当用户实际释放键时）并过滤#testSelect对象。

JS：

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));
        } 
    }
}

​</p>