Question

我正在使用滑动菜单（select / object html one），它是通过使用jsp页面从数据库中获取数据而动态生成的。

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

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

我实际上已经使用javascript解决了这个问题，但是这个解决方案存在一些性能问题，因为我必须使用IE 8。

是否有使用JQuery或Ajax的类似解决方案？

这与我的代码类似：

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.innerHTML.indexOf(el.value) != -1) {
            select.appendChild(opt.cloneNode(true));
        } 
    }
}

Answer 1

尝试这样的代码：

var optionsList = [];
function searhSelect(el) {
    var select = document.getElementById('testSelect');

    if(optionsList.length == 0) {        
        for(var i = 0; i < select.options.length; i++)
            optionsList[i] = {key:select.options[i].value,value:select.options[i].innerHTML}; //copy select to a variable for future use      
    }   
    //if(el.value.length > 2) {
        var tmp = "<select id=\"testSelect\" mulitple=\"multiple\" size=\"4\">";
        for(var i =0; i < optionsList.length; i++) {
            var opt = optionsList[i];
            if(opt.value.indexOf(el.value) != -1) {                 
                tmp += ' <option value="' + opt.key + '" >' + opt.value + '</option> ';                        
            }         
        }   
        document.getElementById('test').innerHTML = tmp + "</select>";
    //}

}

HTML：

<div id="test">
   <select multiple id="testSelect">
      <option>test</option>
      <option>temp</option>
      <option>cast</option>
      <option>dest</option>
      <option>inst</option>
      <!-- in my test same options you see above were copy/pasted many times. I had little more than 10k  options->
   </select>
</div>

我删除了所有clone / appendChild，用包含值和文本字段的对象填充所有元素int数组，最重要的是，现在使用innerHTML创建选项。此外，请注意，选择现在包含另一个div。而不是使用selectHTML和简单设置选项HTML的内部HTML，创建了具有整个选择HTML的字符串（var tmp = "<select id=\"testSelect\" mulitple=\"multiple\" size=\"4\">";）。这需要作为IE的this错误的解决方法。

在您当前的实现中，每个选项一旦被找到就会被添加。这样IE每次添加新选项时都会呈现元素（）。但是上面的代码只会强制渲染一次 - 当所有选项都被定义时。不幸的是，这只是部分帮助。它的工作速度比问题中的代码快，但它仍然需要大约10秒（与旧代码的20-30s相比）来渲染新的选择元素（document.getElementById('test').innerHTML = tmp + "</select>"; - 此时它会冻结浏览器10秒）

我不认为你可以在不进行一些全局更改的情况下加快速度（例如，使用复选框自定义多选以选择元素，并使用display：block / none显示/隐藏元素）。可能的解决方案 - 仅在存在相对少量的过滤元素时更新元素。例如 - 当搜索的值的长度超过2个字符时（请参阅注释掉//if(el.value.length > 2) {）。但要使用它，当前的实现需要额外的编码（至少，一旦用户从输入字段中删除一些字符，就应该再次显示完整列表。）

Answer 2

我猜你试图做类似自动完成的事情。你试过http://api.jqueryui.com/autocomplete吗？

或者您只是希望过滤掉SELECT选项？然后我想隐藏/禁用它们更容易，而不是克隆它们。

实时编辑滑动html菜单

2 个答案: