jQuery 创建带有搜索选项的选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18796221/
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
Creating a select box with a search option
提问by SBB
I am trying to replicate what you can see here in this image. 
我正在尝试复制您在此图像中可以看到的内容。
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?
最好的方法是什么？是否已经存在与引导程序相关的任何内容？
回答by Hemanth Palle
This simple code worked for me
这个简单的代码对我有用
<!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>Incase you need to use only select tag use Selectize Js. It has all options we require .Please Try It Demo using Selectize Js
如果您只需要使用 select 标签，请使用 Selectize Js。它有我们需要的所有选项。请尝试使用 Selectize Js 演示
回答by Hemanth Palle
Selectize Js has all options we require .Please Try It
Selectize Js 有我们需要的所有选项。请尝试一下
$(document).ready(function () {
$('select').selectize({
sortField: 'text'
});
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
</head>
<body>
<select id="select-state" placeholder="Pick a state...">
<option value="">Select a state...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
</select>
</body>
</html>回答by Kai Carver
Select2 http://select2.github.iomay be even better and more active than Chosen.
Select2 http://select2.github.io可能比 Chosen 更好更活跃。
See this comparison: http://sitepoint.com/jquery-select-box-components-chosen-vs-select2
请参阅此比较：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/2663It works great.
我选择了 Select2（几个月前），因为 Chosen 在通过 IME 使用中文字符时遇到了问题http://github.com/harvesthq/chosen/issues/2663效果很好。
回答by Bashirpour
Full option searchable select box
完整选项可搜索选择框
This also supports Control buttons keyboards such as ArrowDownArrowUpand Enterkeys
这也支持控制按钮键盘，例如ArrowDownArrowUp和Enter键
function filterFunction(that, event) {
let container, input, filter, li, input_val;
container = $(that).closest(".searchable");
input_val = container.find("input").val().toUpperCase();
if (["ArrowDown", "ArrowUp", "Enter"].indexOf(event.key) != -1) {
keyControl(event, container)
} else {
li = container.find("ul li");
li.each(function (i, obj) {
if ($(this).text().toUpperCase().indexOf(input_val) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
container.find("ul li").removeClass("selected");
setTimeout(function () {
container.find("ul li:visible").first().addClass("selected");
}, 100)
}
}
function keyControl(e, container) {
if (e.key == "ArrowDown") {
if (container.find("ul li").hasClass("selected")) {
if (container.find("ul li:visible").index(container.find("ul li.selected")) + 1 < container.find("ul li:visible").length) {
container.find("ul li.selected").removeClass("selected").nextAll().not('[style*="display: none"]').first().addClass("selected");
}
} else {
container.find("ul li:first-child").addClass("selected");
}
} else if (e.key == "ArrowUp") {
if (container.find("ul li:visible").index(container.find("ul li.selected")) > 0) {
container.find("ul li.selected").removeClass("selected").prevAll().not('[style*="display: none"]').first().addClass("selected");
}
} else if (e.key == "Enter") {
container.find("input").val(container.find("ul li.selected").text()).blur();
onSelect(container.find("ul li.selected").text())
}
container.find("ul li.selected")[0].scrollIntoView({
behavior: "smooth",
});
}
function onSelect(val) {
alert(val)
}
$(".searchable input").focus(function () {
$(this).closest(".searchable").find("ul").show();
$(this).closest(".searchable").find("ul li").show();
});
$(".searchable input").blur(function () {
let that = this;
setTimeout(function () {
$(that).closest(".searchable").find("ul").hide();
}, 300);
});
$(document).on('click', '.searchable ul li', function () {
$(this).closest(".searchable").find("input").val($(this).text()).blur();
onSelect($(this).text())
});
$(".searchable ul li").hover(function () {
$(this).closest(".searchable").find("ul li.selected").removeClass("selected");
$(this).addClass("selected");
});div.searchable {
width: 300px;
float: left;
margin: 0 15px;
}
.searchable input {
width: 100%;
height: 50px;
font-size: 18px;
padding: 10px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: block;
font-weight: 400;
line-height: 1.6;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
}
.searchable ul {
display: none;
list-style-type: none;
background-color: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid #add8e6;
border-top: none;
max-height: 180px;
margin: 0;
overflow-y: scroll;
overflow-x: hidden;
padding: 0;
}
.searchable ul li {
padding: 7px 9px;
border-bottom: 1px solid #e1e1e1;
cursor: pointer;
color: #6e6e6e;
}
.searchable ul li.selected {
background-color: #e8e8e8;
color: #333;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchable">
<input type="text" placeholder="search countries" onkeyup="filterFunction(this,event)">
<ul>
<li>Algeria</li>
<li>Bulgaria</li>
<li>Canada</li>
<li>Egypt</li>
<li>Fiji</li>
<li>India</li>
<li>Japan</li>
<li>Iran (Islamic Republic of)</li>
<li>Lao People's Democratic Republic</li>
<li>Micronesia (Federated States of)</li>
<li>Nicaragua</li>
<li>Senegal</li>
<li>Tajikistan</li>
<li>Yemen</li>
</ul>
</div>回答by SammeAyala
This will work for most of us. The answer given by Hemanth Palleis 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 tagis not supported in Internet Explorer 9 and earlier versions, or in Safari.
这对我们大多数人都有效。Hemanth Palle给出的答案是最简单的方法，它对我有用，不需要 JS 代码。我发现的唯一问题是，根据 W3Schools，Internet Explorer 9 及更早版本或 Safari 不支持datalist 标记。
<!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>
回答by Stnfordly
Use a data list instead.
改用数据列表。
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
Not supported I.E. 9 and back. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
不支持 IE 9 和后面。 https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
回答by majed
You can use select2 . it is the best js for this job.
https://select2.org/dropdown
您可以使用 select2 。它是这项工作的最佳 js。
https://select2.org/dropdown
$(document).ready(function () {
//change selectboxes to selectize mode to be searchable
$("select").select2();
});<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
<select id="select_page" style="width:200px;" class="operator">
<option value="">Select a Page...</option>
<option value="alpha">alpha</option>
<option value="beta">beta</option>
<option value="theta">theta</option>
<option value="omega">omega</option>
</select>
</body>
</html>回答by user2288580
Here's a handy open source library I made earlier that uses jQuery: https://bitbucket.org/warwick/searchablelist/src/master/And here is a working copy on my VPS: http://developersfound.com/SearchableList/The library is highly customisable with overridable behavours and can have seperate designs on the same web page Hope this helps
下面是我早些时候发表的一项方便的开源库，它使用jQuery的： https://bitbucket.org/warwick/searchablelist/src/master/这里是我的VPS工作副本：http://developersfound.com/SearchableList/的库是高度可定制的，具有可覆盖的行为，并且可以在同一网页上有单独的设计希望这会有所帮助
回答by M. Lak
This will done by using jquery. Here is the code
这将通过使用 jquery 来完成。这是代码
<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>
