在选择多列表中搜索并仅显示匹配选项答案

【问题标题】：Search & only display matching options in a Select multi list在选择多列表中搜索并仅显示匹配选项
【发布时间】：2014-11-24 17:31:47
【问题描述】：

我有以下代码在 Firefox 中有效，但在 IE 中无效。 IE 报错：

The option tag doesn't support the CSS display attribute

我将如何解决这个问题，使其与跨浏览器兼容。我更喜欢 vanilla JavaScript，但 jQuery 可以作为最后的手段。

这是一个 JSFiddle：http://jsfiddle.net/djlerman/zP9uC/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Search in Select Multi Drop Down List</title>
  <script type='text/javascript'>

    function searchSelect(searchForID, searchInID) {
      var input = document.getElementById(searchForID).value.toLowerCase();
      var output = document.getElementById(searchInID).options;

      for (var i = 0; i < output.length; i++) {
        if (output[i].text.toLowerCase().indexOf(input) < 0) {
          output[i].style.display = "none";
          output[i].setAttribute('style', 'display:none');

        } else {
          output[i].style.display = "";
          output[i].setAttribute('style', 'display:');
        }
      }
    }

  </script>
</head>

<body>
Search:
<input type="text" size="25" ID="searchFor" onkeyup="searchSelect(this.id,'searchIn')">
<br />
<select size="3" multiple="multiple" name="searchIn" id="searchIn">
  <option value="abc">Option abc</option>
  <option value="123">Option 123</option>
  <option value="abc123">Option abc123</option>
  <option value="xyz">Option xyz</option>
  <option value="789">Option 789</option>
  <option value="xyz789">Option xyz789</option>
</select>

</body>

</html>

【问题讨论】：

标签： javascript html forms cross-browser incompatibility

【解决方案1】：

我已经通过 jQuery 构建了一个解决方案。它允许通过特殊字符、unicode 字符进行搜索。它对于搜索 10k 选项来说已经足够快了。 http://jsfiddle.net/thongduong/3528xg7q/4/

var showOnlyOptionsSimilarToText = function (selectionEl, str, isCaseSensitive) {
    if (typeof isCaseSensitive == 'undefined')
        isCaseSensitive = true;
    if (isCaseSensitive)
        str = str.toLowerCase();

    var $el = $(selectionEl);

    $el.children("option:selected").removeAttr('selected');
    $el.val('');
    $el.children("option").hide();

    $el.children("option").filter(function () {
        var text = $(this).text();
        if (isCaseSensitive)
            text = text.toLowerCase();

        if (text.indexOf(str) > -1)
            return true;

        return false;
    }).show();

};
$(document).ready(function () {
	var timeout;
	$("#SearchBox").on("keyup", function () {
		var userInput = $("#SearchBox").val();
		window.clearTimeout(timeout);
		timeout = window.setTimeout(function() {
			showOnlyOptionsSimilarToText($("#SelectBox"), userInput, true);
		}, 500);

	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<input type="text" name="SearchBox" id="SearchBox" placeholder="Search" />
<select name="SelectBox" id="SelectBox" required="required" size="5">
	<option value="">Please select</option>
	<option value="1">option 1</option>
	<option value="2">option (1)</option>
	<option value="3">option @ (1)</option>
</select>

【讨论】：

【解决方案2】：

这只是一个快速的想法，因此肯定有改进的余地，但您实际上可以删除选项而不是仅仅尝试隐藏它们，然后在 keyup 上再次恢复和过滤：

var restore;
function searchSelect(searchForID, searchInID) {
  restore = restore || document.getElementById(searchInID).innerHTML;
  document.getElementById(searchInID).innerHTML = restore;
  var input = document.getElementById(searchForID).value.toLowerCase();
  var output = document.getElementById(searchInID).options;
  for (var i = 0; i < output.length; i++) {
    if (output[i].text.toLowerCase().indexOf(input) < 0) {
        output.remove(i);
    }
  }
}

http://jsfiddle.net/RU5mP/

【讨论】：

jsfiddle 在第 5 行返回和错误“期望一个赋值或函数调用，而是看到一个表达式。”我不明白如果搜索框为空，它将如何恢复选项。
jsfiddle.net/RU5mP/1 试试看，它会在每次为空时通过将 inninterHTML 替换为原始 HTML 来恢复选项，并且仅在 indexOf(input) 返回-1时删除选项，它不会t 当输入为空时
嗯.. 在 Fire Fox 中删除了一些选项，但保留了其他不符合搜索条件的选项。示例：当我键入“abc”时，它还会显示“选项 789”。在 IE 上，只要按下第一个键，它就会删除所有选项，并且永远不会返回它们。谢谢你帮我解决这个问题。

【解决方案3】：

这是我想出的最终解决方案。希望其他人会发现它有用。

我要做的主要事情是从变量中加载 DropDown 数据。这样，在加载 DropDown 时，我可以过滤出想要的结果。

http://jsfiddle.net/djlerman/cYkb4/

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>
    Search <input type="text"  ID="searchFor" onkeyup="searchSelect(this.id,'searchIn')">
    <br />
    <select id="searchIn" size="10" multiple>  </select>

    <script type='text/javascript'>//<![CDATA[ 
      window.onload = function () {
        setOptions("searchIn");
      };

      var jsonObj = {};

      jsonObj = {"group1":
                  {"option1":"Option 1",
                   "option2":"Option 2"},
                 "group2":
                  {"option3":"Option 3",
                   "option5":"Option 5",
                   "option7":"Option 7"}
                };

      function setOptions(searchInID) {
        var theSelect = document.getElementById(searchInID);

        for (var key in jsonObj) {
          // set option groups
          var optionGroup   = document.createElement("optgroup");
          optionGroup.label = key;


          for (var key1 in jsonObj[key]) {         
            // set options
            var option   = document.createElement("option");
            option.value = key1;
            option.text  = jsonObj[key][key1];
            option.label = jsonObj[key][key1];
            optionGroup.appendChild(option);
          }

          theSelect.appendChild(optionGroup);
        }
      }

      function searchSelect(searchForID, searchInID) {
        var input     = document.getElementById(searchForID).value.toLowerCase();
        var theSelect = document.getElementById(searchInID);

        theSelect.innerHTML = '';

        for(var key in jsonObj) {
          var optionGroup   = document.createElement("optgroup");
          optionGroup.label = key;


          for(var key1 in jsonObj[key]) {
            if(jsonObj[key][key1].toLowerCase().indexOf(input) >= 0) {
              var option   = document.createElement("option");
              option.value = key1;
              option.text  = jsonObj[key][key1];
              option.label = jsonObj[key][key1];
              optionGroup.appendChild(option);
            }
          }

          theSelect.appendChild(optionGroup);
        }
      }
      //]]>  
    </script>
  </body>
</html>

【讨论】：