我尝试为我的网站整合标记/自动填充功能。它通过选项文本进行处理。我几乎接近结果但仍然悬挂。
现在,当您尝试选择选项文本时,将显示相关文本。但现在我想通过选项值显示加德满都或相关选项文本搜索。
例: 当我们搜索值 a001 加德满都将出现并选择与 a002 相同时,它将显示 pokhara
$("select").select2({
tags: "true",
placeholder: "Select an option",
allowClear: true,
width: '100%',
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
value: true // add additional parameters
}
}
});

.select2-container {
max-width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="custom-select" multiple="multiple">
<option value="a001">Kathmandu</option>
<option value="a002">Pokhara</option>
<option value="a003">Lalitpur</option>
</select>
&#13;
我认为在通过值搜索后我很接近并点击它将显示带有id的相关选项。但我只想要选项文本,如 pokhara 加德满都,而不是选择区域的ID。
答案 0 :(得分:6)
要在仅输入Id
检查输入的字词是否与现有Text
匹配时,删除显示的Id
和Id
的翻倍,如果是只返回匹配选项的Text
:
options = [];
// create an array of select options for a lookup
$('.custom-select option').each(function(idx) {
options.push({id: $(this).val(), text: $(this).text()});
});
$("select").select2({
tags: "true",
placeholder: "Select an option",
allowClear: true,
width: '100%',
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
// check whether the term matches an id
var search = $.grep(options, function( n, i ) {
return ( n.id === term || n.text === term); // check against id and text
});
// if a match is found replace the term with the options' text
if (search.length)
term = search[0].text;
else
return null; // didn't match id or text value so don't add it to selection
return {
id: term,
text: term,
value: true // add additional parameters
}
}
});
$('select').on('select2:select', function (evt) {
//console.log(evt);
//return false;
});
.select2-container {
max-width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="custom-select" multiple="multiple">
<option value="a001">Kathmandu</option>
<option value="a002">Pokhara</option>
<option value="a003">Lalitpur</option>
</select>
答案 1 :(得分:1)
如果您搜索a001
,则输出中的输出是显示ID和文本。了解placeholder。
如果值是对象,则该对象应与之兼容 选择2的内部对象。 id应该是要查找的id 确定是否应显示占位符。文字应该是 选择该选项时显示的占位符。
示例:在文本框
中输入display kathmandu 和 a001 后搜索a001
在select2中使用 placeholder
placeholder: {
id: "-1",
text: "Select an option",
}
$("select").select2({
tags: "true",
placeholder: {
id: "-1",
text: "Select an option",
},
allowClear: true,
width: '100%',
createTag: function(params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
value: true // add additional parameters
}
}
});
&#13;
.select2-container {
max-width: 400px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<select class="custom-select" multiple="multiple">
<option value="a001">Kathmandu</option>
<option value="a002">Pokhara</option>
<option value="a003">Lalitpur</option>
</select>
&#13;