Creating a select box with a search option

2019-02-02 04:52发布

站内问答 / JavaScript
1843 5 6

I am trying to replicate what you can see here in this image. enter image description here

I want to be able to either type in the text field above the box or just click on the option directly.

What would be the best way to go about that? Is there anything bootstrap related that exists already?

5条回答
地球回转人心会变
2楼-- · 2019-02-02 05:09

This will work for most of us. The answer given by Hemanth Palle is the easiest way to do it, It worked for me and the JS code wasn't necessary. The only problem that I've found is that according to W3Schools, The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>  
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
3楼-- · 2019-02-02 05:23

Select2 http://select2.github.io may be even better and more active than Chosen.

See this comparison: http://sitepoint.com/jquery-select-box-components-chosen-vs-select2

I went for Select2 (a few months ago) because Chosen had an issue when using Chinese characters via an IME http://github.com/harvesthq/chosen/issues/2663 It works great.

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
4楼-- · 2019-02-02 05:24

try jQuery ui autocomplete. For that check out this link

http://jqueryui.com/autocomplete/#combobox

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
5楼-- · 2019-02-02 05:31

This simple code worked for me

$(document).ready(function(){
$("input").click(function(){
        $(this).next().show();
        $(this).next().hide();
    });

});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>  
</body>
</html>

查看更多
0人赞 添加讨论(0) 举报
你好瞎i
6楼-- · 2019-02-02 05:35

This will done by using jquery. Here is the code 

<select class="chosen" style="width:500px;">
<option>Html</option>
<option>Css</option>
<option>Css3</option>
<option>Php</option>
<option>MySql</option>
<option>Javascript</option>
<option>Jquery</option>
<option>Html5</option>
<option>Wordpress</option>
<option>Joomla</option>
<option>Druple</option>
<option>Json</option>
<option>Angular Js</option>
</select>
</div>
<script type="text/javascript">
$(".chosen").chosen();
</script>

Working Example Here...

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)