搜索并获取备份删除元素

Question

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

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

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

感谢您的帮助。

代码如下：

CodePen Demo

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 = "";
}

希望对您有所帮助！干杯:)！