Question

我有以下代码在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>

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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/

Answer 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>

搜索＆amp;仅在“选择多个列表”中显示匹配选项

3 个答案: