`DEMO`

Question

我在select元素中创建了一个javascript搜索。

选项标签不会隐藏任何CSS或显示任何CSS，对于此解决方案，我已删除了不匹配的选项并为重置列表按钮的已删除选项进行备份。

它工作正常，但我有一个问题，我有这个选择列表的大约19000选项。搜索工作正常，但当我点击重置按钮时，只有19000年的9500选项回来。

感谢您的帮助。

以下是代码：

HTML

<h1>Search in select "option" tag</h1>
<select multiple name="selectMenu" id="selectMenu" style="width:100px" size=10>
<option value ="item 1">item 1</option>
<option value ="item 2">item 2</option>
<option value ="thing 3">thing 3</option>
<option value ="item 4">item 4</option>
<option value ="stuff 5">stuff 5</option>
<option value ="stuff 6">stuff 6</option>
<option value ="stuff 7">stuff 7</option>
<option value ="item 8">item 8</option>
</select>

<p>Search within this list</p>
<input type=text name="search" id="search" onkeypress="searchItems();">
<br>
<input type=button value="Search" onclick="searchItems();">
<input type=button value="Reset List" onclick="resetList();">

的Javascript

var itemList = null;
var itemListOriginal = new Array();
var backup = false;

function searchItems() {
    itemList = document.getElementById("selectMenu");
    var searchStrObj = document.getElementById("search");
    var itemDescription = "";

    // replace white space with wild card
    var searchString = searchStrObj.value;
    searchString = searchString.replace(" ", ".*");

    var re = new RegExp("(" + searchString + ")", "i"); //"i" sets "ignore case" flag

    if (itemListOriginal.length < 1)
        backup = true;
    else
        backup = false;

    // loop through options and check for matches
    for (i=itemList.options.length - 1; i >=0 ; i--) {
        itemDescription = itemList.options.item(i).text; 

        if (backup) {
            hash = new Array();
            hash['name'] = itemDescription;
            hash['value'] = itemList.options.item(i).value;
            itemListOriginal[i] = hash;
        }

        if (!itemDescription.match(re)) {
            itemList.remove(i);
        }
    }

    return false;
}

function resetList() {
    //hack! remove all elements from list before repopulating
    for (i=itemList.options.length - 1; i >=0 ; i--) {
        itemList.remove(i);
    }

    for (i=0; i < itemListOriginal.length; i++) {
        hash = itemListOriginal[i];
        //option = new Option(hash['name'], hash['value']); REMOVED
        //itemList.options.add(option, i); REMOVED
        itemList.options[i] = new Option(hash['name'], hash['value'], false, false);
    }

    document.getElementById("search").value = "";
}

Answer 1

`DEMO`

我发现每次调用函数searchitems()时，代码备份都会更改。

从而删除存储在其中的旧值。

所以我改变了

It is working fine but I have a problem, 
I have about 19000 option for this select list. 
search works fine but when I hit reset button, 
only 9500 option from 19000 comes back.

这就是背后的原因。所以我修改了你的代码，并在其中添加了一个全局变量backupList。因此，当删除不需要的元素时，我的代码中不会删除旧元素，而是使用+=速记运算符将新删除的元素附加到旧的删除元素。

还可以动态创建options并使用.add或.append或任何类似的javascript方法，我可以使用.innerHTML来简化您的操作在代码中看到。唯一的问题是，现在单击reset后，元素将不会按照第一种情况进行排序，您需要对它们进行排序，相信我很容易。用于排序参考：sort select menu alphabetically?。

var itemList = null;
var itemListOriginal = new Array();
var backup = false;
var backupList =""; // To store removed elements

function searchItems() {
itemList = document.getElementById("selectMenu");
var searchStrObj = document.getElementById("search");
var itemDescription = "";
var searchString = searchStrObj.value;
searchString = searchString.replace(" ", ".*");
var re = new RegExp("(" + searchString + ")", "i"); //"i" sets "ignore case" flag
for (i=itemList.options.length - 1; i >=0 ; i--) {
        itemDescription = itemList.options.item(i).text; 
        var hash = new Array();
        hash['name'] = itemDescription;
        hash['value'] = itemList.options.item(i).value;
        itemListOriginal[i] = hash;
        if (!itemDescription.match(re)) {
          itemList.remove(i); //Remove Unwanted Elements
          backupList+="<option value='"+ hash['value']+"'>"+itemDescription+"</option>"; 
         /* append new unwanted elements with previous, 
           initially it is blank "". 
           This is Important 
         */
        }
}
return false;
}

function resetList() {
var itemList = document.getElementById("selectMenu");
itemList.innerHTML+=backupList; /* Add removed elements to list. 
alternate to .append,.add or similar function*/
backupList=""; // Make Backup Empty!
document.getElementById("search").value = "";
}

希望它有所帮助！干杯:)！

搜索并获取备份删除元素

1 个答案:

`DEMO`