[英]Select Box with Search Option
我有一个 select 下拉菜单。 我需要在我的选项中进行搜索。 我在上面使用了 select2 下拉菜单,但是 select 没有显示搜索,并且设计完全改变了。
这是我的代码:
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<select class="single" name="icons" onchange="TypeCheck(this);">
<option value="0">Pick an icon ...</option>
<option value="1">glass</option>
<option value="2">door</option>
<option value="3">Furniture</option>
</select>
function matchCustom(params, data) {
if ($.trim(params.term) === '') {
return data;
}
if (typeof data.text === 'undefined') {
return null;
}
if (data.text.indexOf(params.term) > -1) {
var modifiedData = $.extend({}, data, true);
modifiedData.text += ' (matched)';
return modifiedData;
}
return null;
}
$(document).ready(function() {
$('.single').select2({
placeholder: "Select Country",
allowClear: true,
matcher: matchCustom
});
});
您可以使用 select2 默认搜索选项,而不是您想实现自己的搜索代码块。
<select class="yourClassName" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
您可以使用 select2 默认 jquery 代码
$(document).ready(function() {
$('.yourClassName').select2();
});
您可以访问此链接了解更多详细信息https://select2.org/getting-started/basic-usage
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.