有没有办法使选择选项可选择/自动完成/搜索?很遗憾不能更改。所以我不能改变选择选项到文本字段.但是我可以访问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。
7条答案
按热度按时间ff29svar1#
您可以考虑使用名为Select2的jQuery插件。您不能自关闭
<select>
标签!你可以这样使用它:fzsnzjdm2#
好吧,我明白你不能改变选择其他任何东西,但那些谁正在寻找类似的东西,可以改变
select
到datalist
,这是非常简单的:u7up0aaq3#
查看Chosen。
我试过
select2
和selectize
,但都不适合我。我现在用的是jQuery 1.9.x。Chosen
在3.6上进行了初步测试,但不确定它是否能在所有浏览器的当前jQuery版本中正常工作。[更新]在我的生产环境中,我使用的是jQuery 1.9.x with Chosen,它在我的用例中运行得非常稳定。
nvbavucw4#
您可以使用JavaScript来包含其他脚本,如这里所解释的:
How do I include a JavaScript file in another JavaScript file?
然后你可以使用Selectize来解决这个问题:
您还需要在css中包含selectize.css中的规则(或者您可以使用JavaScript中类似的
includeCss
函数创建一个link元素)https://jsfiddle.net/qpyhjydp/
注意,在fiddle中,我修复了自动关闭
<select />
(不允许)fdbelqdn5#
显示:没有将不工作的IE11
我在选择选项中搜索时遇到了同样的问题。
我所做的是禁用不匹配的选项和隐藏它们。
在此之后,我已经排序的选项,以显示顶部只启用选项。
我写的代码粘贴在下面-请尝试理解逻辑,我希望它能工作
要禁用这些选项,请用途:
并再次使其能够用途:
要按禁用的选项排序,请执行以下操作:
ecfdbz9o6#
全选项可搜索选择框
它还支持控制按钮键盘,如
ArrowDown
ArrowUp
和Enter
键https://stackoverflow.com/a/56590636/6569224
pgvzfuti7#
对于那些在项目中使用bootstrap的人,可以使用下拉按钮进行可搜索的选择。在下拉菜单中添加一个输入字段,并使用javascript过滤选项。
详细的解释和例子可以在下面的博客上找到:
https://medium.com/@akshat_yadav/searchable-select-in-bootstrap-16353b93c96d