可搜索选择选项
Searchable select option
是否有任何方法可以将select选项设置为可选/自动完成/可搜索?不幸的是,我无法更改表单。因此,我无法将select选项更改为文本字段。但是我可以访问css和javascript。。
下面是选择选项。
<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>
有没有任何javascript/jquery和css可以将其转换为可serchable。
您可以考虑使用名为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>
好的,我知道你不能将select更改为其他任何内容,但那些正在搜索类似内容并可以将select
更改为datalist
的人除外,这很简单:
<input list="weekday">
<datalist id="weekday">
<option value="Sunday">
<option value="Monday">
<option value="Tuesday">
<option value="Wednesday">
<option value="Thursday">
<option value="Friday">
<option value="Saturday">
</datalist>
签出选中项。
我同时尝试了select2
和selectize
,但都不适合我。我目前使用的是jQuery 1.9.x。Chosen
首先在3.6上进行了基本测试,但不确定它是否能在所有浏览器的当前jQuery版本中正常工作。
[更新]在我的生产环境中,我使用的是带有Chosen的jQuery 1.9.x,它在我的用例中运行得非常稳定。
您可以使用javascript来包含其他脚本,如这里所解释的:
如何将一个JavaScript文件包含在另一个JavaScript中?
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
}
然后你可以使用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();
});
您还需要在css中包含selectize.css中的规则(或者您可以在Javascript中使用类似的includeCss
函数创建一个链接元素)
https://jsfiddle.net/qpyhjydp/
请注意,在fiddle中,我修复了自动关闭<select />
(不允许)
显示:没有一个对IE11 无效
我在选择选项中搜索时遇到了同样的问题。
我所做的是禁用不匹配的选项并隐藏它们。
在此之后,我对选项进行了排序,只在顶部显示已启用的选项。
我写的代码粘贴在下面-请试着理解逻辑,我希望它能正常工作
要禁用选项,请使用:
$("#addselect option")attr('disabled', 'disabled').hide
并再次启用:
$("#addselect option").removeAttr('disabled').show();
按禁用选项排序:
$("#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);
}
}
}
完整选项可搜索选择框
它还支持控制按钮键盘,如ArrowDown
ArrowUp
和Enter
键
https://stackoverflow.com/a/56590636/6569224
对于那些在项目中使用引导程序的人,可以使用下拉按钮进行可搜索的选择。在下拉菜单中添加一个输入字段,并使用javascript过滤选项。
详细的解释和例子可以在以下博客上找到:
https://medium.com/@akshat_yadav/searchable-select-in-bootstrap-16353b93c96d
- 使用此选项选择父类内部的类
- 更新:仅根据单选按钮和所选选项选择特定项目
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- ng-单击在IE中不起作用的选项选择Angularjs
- 从选项选择中删除值
- On为<选项>选择等效项
- 用户界面先前选择的选项选择更改
- 使用ng重复或ng选项和删除空白选项选择长方体角度
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 输入:选中,选项:选择选择器
- 根据使用angularjs从下拉菜单中选择的选项选择适当的复选框
- 如何根据 html 中的选项/选择重定向用户(单击按钮后)
- 使用ng选项选择中的ng选项进行过滤器下拉列表
- 如何设置选项选择的值
- 如何搜索长下拉选项/选择列表
- jQuery - 根据下拉选项选择列出结果
- 从选项选择单击时打开 2 个 URL
- 在 Angular JS 中为 ng 选项选择默认值
- 下拉选项选择的操作
- 通过单击单选按钮清除所有选项选择条目