选择2 jquery自定义属性国家名和大写名称。
选择2 jquery自定义属性国家名和大写名称。
提问于 2021-07-23 15:30:23
我试图添加一个自定义属性来选择2个选项，即使我使用“数据名称”搜索，该选项也会显示出来。
<select name="countries" class="vat" id="example">
<option value="USA" data-name="Newyork" selected="selected">United States</option>
<option value="UK" data-name="london">Unied Kingdom</option>
<option value="DE" data-name="Berlin">Germany</option>
</select>我试图接近搜索，如果我输入柏林，德国应该会出现在选择名单上
<script type="text/javascript">
$(document).ready(function() {
$("#example").select2().find(":selected").data("name");
});
</script>请试着帮我一下
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-24 03:45:50
您可以使用matcher方法的select2插件。因此，每当用户在输入框中输入时，您都可以使用..indexOf(input_value)在选择框中筛选选项。如果该值为true，则将显示选项，否则它将被隐藏。
演示代码：
$(function() {
$("select").select2({
"width": "150px",
matcher: function(term, text, option) {
//get input box value
var input_value = $(".select2-input").val().toLowerCase();
//get the data attribute value..
var data_name = $(option[0]).data("name").toLowerCase();
//if match ..show that option
return data_name.indexOf(input_value) != -1 || option[0].textContent.toLowerCase().indexOf(input_value) != -1;
}
})
})<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<select name="countries" class="vat" id="example">
<option value="USA" data-name="Newyork" selected="selected">United States</option>
<option value="UK" data-name="london">Unied Kingdom</option>
<option value="DE" data-name="Berlin">Germany</option>
</select>
Stack Overflow用户
发布于 2021-07-23 16:30:30
尝试这个，您可以搜索州和国家将显示
<input list="brow">
<datalist id="brow">
<option value="USA" data-name="Newyork" selected="selected">new york, florida</option>
<option value="UK" data-name="london">london</option>
<option value="DE" data-name="Berlin">berlin, other states</option>
</datalist> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68501629
复制相关文章
相似问题
腾讯云开发者
