[英]How can I put an input in the top of select tag for searching?
I'm trying to make an advanced <select>
tag but implementing an input before the first <option>
attribute for searching. 我正在尝试制作高级的<select>
标记,但是在第一个<option>
属性进行搜索之前实现了输入。 Something like this: 像这样:
Here is my code. 这是我的代码。 How can I add <input name="search_category" class="search" />
to my code? 如何在代码中添加<input name="search_category" class="search" />
?
select { width: 50%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select size="1" class="selection"> <option>Social</option> <option>Political</option> <option>Cultural</option> <option>Athletic</option> <option>Other</option> </select>
Note: I use jQuery. 注意:我使用jQuery。
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist
This should solve it, if I understood the question correct. 如果我理解正确的问题,这应该可以解决。
Have you tried the jquery select2 ? 你尝试过jQuery select2吗?
https://select2.github.io/ https://select2.github.io/
I think it will easily solve your problem :) 我认为它将轻松解决您的问题:)
Not Jquery, but you can use datalist 不是Jquery,但是您可以使用数据列表
<style> input { font-size:1.5em; } </style> <input type="text" placeholder="Select" name="cat" list="cat"> <datalist id="cat"> <option>Social</option> <option>Political</option> <option>Cultural</option> <option>Athletic</option> <option>Other</option> </datalist>
Note: In chrome you will get the select icon, but may not be mozilla 注意:在chrome中,您将获得选择图标,但可能不是mozilla
I made good experiences using a plugin called Chosen : https://harvesthq.github.io/chosen/ 我使用名为Chosen的插件取得了很好的经验: https : //harvesthq.github.io/chosen/
Or Select2 : https://select2.github.io/ 或Select2 : https : //select2.github.io/
If a jQuery dependency is ok... 如果jQuery依赖关系还可以...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.