我使用HTML制作了一个包含所有国家名称的选择标签,我想使用搜索栏搜索它们的值,而不需要任何插件或附加组件,这是否可能?
是的,你可以。首先,在这个演示中看到它的实际效果。如果你喜欢你所看到的内容,下面是如何实现它的方法:
<input type="search" id="searchBox">
<select id="countries">
<option value="arg">Argentina</option>
<option value="usa">United States of America</option>
<option value="som">Somalia</option>
</select>
非常简单,一个搜索输入框和一个带有几个选项的选择框。
searchBox = document.querySelector("#searchBox");
countries = document.querySelector("#countries");
var when = "keyup"; //You can change this to keydown, keypress or change
searchBox.addEventListener("keyup", function (e) {
var text = e.target.value;
var options = countries.options;
for (var i = 0; i < options.length; i++) {
var option = options[i];
var optionText = option.text;
var lowerOptionText = optionText.toLowerCase();
var lowerText = text.toLowerCase();
var regex = new RegExp("^" + text, "i");
var match = optionText.match(regex);
var contains = lowerOptionText.indexOf(lowerText) != -1;
if (match || contains) {
option.selected = true;
return;
}
searchBox.selectedIndex = 0;
}
});
首先,我们来看一下变量:
HTMLElement
。HTMLElement
。对象
。对象
的文本(例如 "阿根廷")以及它的小写字母版本,用于不区分大小写的测试(例如 "argentina")。RegExp Object
,即一个正则表达式,基本上它的作用是测试(不区分大小写,因为第二个参数中有'i')某个字符串是否以某个值开头,在这种情况下,该值将是输入文本。RegExp Object
并对选项的文本进行测试,这意味着它将测试输入的文本是否与选项的文本开头相同。哇,这是很多的内容,那么我们为什么需要进行两个测试呢?因为搜索框有两种选择可能性,一种是当您开始输入"Unit.."时,它应该匹配到"美利坚合众国"(正则表达式),另一种是您只需输入"america",它也应该匹配到"美利坚合众国"(包含)。
所以,它会同时检查这两个测试,如果其中任何一个为真,它将选择该选项。(它还将返回,以便不继续执行代码。)
默认情况下,如果没有测试为真,将选择选择框中的第一个元素。
希望能有所帮助 :)
Thank you @undefined
In your code instead of making it selected i want to disabled it like display none.
But display: none not working in IE11
What I did is disabled the un matched options and the hide them.
After this I have sorted the options to show only enabled options on top.
The code I have written is pasted below - please try to understand the logic I hope it will work
to disabled the options use
$("#addselect option")attr('disabled', 'disabled').hide
and to again enable it use
$("#addselect option").removeAttr('disabled').show();
sort by disabled options.
$("#addselect option").each(function (i, val) {
if ($(this)[i].disabled) {
moveDown("selectId");
}
else {
moveUp("selectId");
}
}
function moveUp(selectId) {
var selectList = document.getElementById(selectId);
var selectOptions = selectList.getElementsByTagName('option');
for (var i = 1; i < selectOptions.length; i++) {
var opt = selectOptions[i];
if (!opt.disabled) {
selectList.removeChild(opt);
selectList.insertBefore(opt, selectOptions[i - 1]);
}
}
}
function moveDown(selectId) {
var selectList = document.getElementById(selectId);
var selectOptions = selectList.getElementsByTagName('option');
for (var i = selectOptions.length - 2; i >= 0; i--) {
var opt = selectOptions[i];
if (opt.disabled) {
var nextOpt = selectOptions[i + 1];
opt = selectList.removeChild(opt);
nextOpt = selectList.replaceChild(opt, nextOpt);
selectList.insertBefore(nextOpt, opt);
}
}
}