Поиск и отображение только вариантов соответствия в списке Select multi

58
5

У меня есть следующий код, который работает в 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>

спросил(а) 2014-03-20T22:02:00+04:00 6 лет, 7 месяцев назад
1
Решение
59

Я создал решение 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>

ответил(а) 2014-11-24T12:31:00+03:00 5 лет, 11 месяцев назад
41

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

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

ответил(а) 2014-04-12T02:57:00+04:00 6 лет, 6 месяцев назад
41

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

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/

ответил(а) 2014-03-20T22:38:00+04:00 6 лет, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема