javascript 可搜索的选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31133249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Searchable select option
提问by mokh223
Is there anyway to make select option as selectable/auto complete/searchable? unfortunately i cannot change the form. so i cannot change the select option into text field. but i be able to access the css and javascript..
无论如何，是否可以将选择选项设为可选/自动完成/可搜索？不幸的是，我无法更改表格。所以我无法将选择选项更改为文本字段。但我能够访问 css 和 javascript ..
Below is the select option.
下面是选择选项。
<select name="siteID" id="siteID" class="abcd" style="width:100%" />
<option value='0' selected='true'> Not associated to any Circuit ID </option>
<option value='2101' > 1007345136 </option>
<option value='2102' > 1007921321 </option>
<option value='2103' > 1007987235 </option>
<option value='2407' > 132 </option>
<option value='2408' > 141 </option>
<option value='2409' > 142 </option>
<option value='2410' > 145 </option>
<option value='2701' > 225 </option>
<option value='2702' > 248 </option>
<option value='2703' > 251 </option>
<option value='2704' > 254 </option>
<option value='2705' > 264 </option>
<option value='1804' > 27 </option>
<option value='2706' > 274 </option>
<option value='2707' > 310 </option>
<option value='2708' > 311 </option>
<option value='3001' > 333 </option>
<option value='2401' > 38 </option>
<option value='2402' > 64 </option>
<option value='2403' > 68 </option>
<option value='2404' > 69 </option>
<option value='2405' > 76 </option>
<option value='2406' > 81 </option>
<option value='2411' > abc123post </option>
<option value='3301' > circuit id 50 </option>
<option value='2105' > fadhil </option>
<option value='2104' > faisal </option>
<option value='3002' > IPEN - SITE TEST </option>
<option value='3601' > Manual Circuit ID </option>
<option value='3302' > new circuit id fadhil </option>
<option value='1809' > try iframe </option>
</select>
is there any javascript/jquery and css that can transform it as serchable.
是否有任何 javascript/jquery 和 css 可以将其转换为可搜索的。
回答by Praveen Kumar Purushothaman
You may consider using a jQuery plugin called Select2. You cannotself-close a <select>tag! You can just use it this way:
您可以考虑使用名为Select2的 jQuery 插件。您不能自行关闭<select>标签！你可以这样使用它：
$(function () {
$("select").select2();
});@import url(https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<select name="siteID" id="siteID" class="abcd" style="width:100%">
<option value='0' selected='true'> Not associated to any Circuit ID </option>
<option value='2101' > 1007345136 </option>
<option value='2102' > 1007921321 </option>
<option value='2103' > 1007987235 </option>
<option value='2407' > 132 </option>
<option value='2408' > 141 </option>
<option value='2409' > 142 </option>
<option value='2410' > 145 </option>
<option value='2701' > 225 </option>
<option value='2702' > 248 </option>
<option value='2703' > 251 </option>
<option value='2704' > 254 </option>
<option value='2705' > 264 </option>
<option value='1804' > 27 </option>
<option value='2706' > 274 </option>
<option value='2707' > 310 </option>
<option value='2708' > 311 </option>
<option value='3001' > 333 </option>
<option value='2401' > 38 </option>
<option value='2402' > 64 </option>
<option value='2403' > 68 </option>
<option value='2404' > 69 </option>
<option value='2405' > 76 </option>
<option value='2406' > 81 </option>
<option value='2411' > abc123post </option>
<option value='3301' > circuit id 50 </option>
<option value='2105' > fadhil </option>
<option value='2104' > faisal </option>
<option value='3002' > IPEN - SITE TEST </option>
<option value='3601' > Manual Circuit ID </option>
<option value='3302' > new circuit id fadhil </option>
<option value='1809' > try iframe </option>
</select>回答by Andrea Casaccia
You can use javascript to include other scripts like explained here:
您可以使用 javascript 来包含其他脚本，如此处所述：
How do I include a JavaScript file in another JavaScript file?
如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
}
Then you could solve your problem using Selectize:
然后你可以使用Selectize解决你的问题：
includeJs("https://code.jquery.com/jquery-2.1.4.min.js");
includeJs("https://cdn.rawgit.com/brianreavis/selectize.js/master/dist/js/standalone/selectize.js");
$(function() {
$('select').selectize();
});
You will also need to include in your css the rules from selectize.css (or you could create a link element using a similar includeCssfunction in Javascript)
您还需要在您的 css 中包含 selectize.css 中的规则（或者您可以includeCss在 Javascript 中使用类似的函数创建一个链接元素）
https://jsfiddle.net/qpyhjydp/
https://jsfiddle.net/qpyhjydp/
Note that in the fiddle I fixed the autoclosing <select />(not allowed)
请注意，在小提琴中我修复了自动关闭<select />（不允许）
回答by Namrata S Jain
Display: none will not work foe IE11
显示：none 对 IE11 不起作用
I had same issue for search in select option.
我在选择选项中搜索时遇到了同样的问题。
What I did is disabled the un matched options and the hide them.
我所做的是禁用不匹配的选项并隐藏它们。
After this I have sorted the options to show only enabled options on top.
在此之后，我对选项进行了排序以仅在顶部显示启用的选项。
The code I have written is pasted below - please try to understand the logic I hope it will work
我写的代码粘贴在下面 - 请尝试理解逻辑我希望它会起作用
to disable the options use:
禁用选项使用：
$("#addselect option")attr('disabled', 'disabled').hide
and to again enable it use:
并再次启用它使用：
$("#addselect option").removeAttr('disabled').show();
to sort by disabled options:
按禁用选项排序：
$("#addselect option").each(function (i, val) {
if ($(this)[i].disabled) {
moveDown("selectId");
}
else {
moveUp("selectId");
}
}
function moveUp(selectId) {
var selectList = document.getElementById(selectId);
var selectOptions = selectList.getElementsByTagName('option');
for (var i = 1; i < selectOptions.length; i++) {
var opt = selectOptions[i];
if (!opt.disabled) {
selectList.removeChild(opt);
selectList.insertBefore(opt, selectOptions[i - 1]);
}
}
}
function moveDown(selectId) {
var selectList = document.getElementById(selectId);
var selectOptions = selectList.getElementsByTagName('option');
for (var i = selectOptions.length - 2; i >= 0; i--) {
var opt = selectOptions[i];
if (opt.disabled) {
var nextOpt = selectOptions[i + 1];
opt = selectList.removeChild(opt);
nextOpt = selectList.replaceChild(opt, nextOpt);
selectList.insertBefore(nextOpt, opt);
}
}
}
回答by Bashirpour
Full option searchable select box
完整选项可搜索选择框
That also supports Control buttons keyboards such as ArrowDownArrowUpand Enterkeys
这也支持控制按钮键盘，例如ArrowDownArrowUp和Enter键
