Искать и отображать только варианты соответствия в списке выбора нескольких

0

У меня есть следующий код, который работает в Firefox, но не работает в IE. IE выдает ошибку:

The option tag doesn't support the CSS display attribute

Как я могу решить это, чтобы он был совместим с браузером. Я бы предпочел ванильный 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>
Теги:
forms
cross-browser

3 ответа

1

Я создал решение jQuery. Он позволяет выполнять поиск по специальным символам, символам юникода. Он достаточно быстр для поиска 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>
Поделиться
0

Это окончательное решение, с которым я столкнулся. Надеюсь, некоторые другие посчитают это полезным.

Главное, что мне нужно было сделать, это загрузить данные 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>
Поделиться
0

Это просто быстрая идея, поэтому есть определенная возможность для улучшения, но вы могли бы фактически удалить параметры вместо того, чтобы просто скрыть их, а затем восстановить и снова фильтровать на клавиатуре:

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/

Поделиться
  • 0
    Возвращает jsfiddle с ошибкой в строке 5 «Ожидается вызов присваивания или функции, и вместо этого он видит выражение». Я не понимаю, как это восстановит параметры, если окно поиска пусто.
  • 0
    jsfiddle.net/RU5mP/1 попробуйте это, и он восстанавливает параметры, когда он пуст, заменяя innterHTML исходным HTML каждый раз, и удаляя параметры только тогда, когда indexOf (input) возвращает -1, чего не будет, когда input является пустой
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню