javascript - 如何在没有插件的情况下搜索选择标签 html 的选项

Question

我用包含所有国家名称的 html 创建了选择标签，我想在没有任何插件或附加组件的情况下使用搜索栏搜索它们的值是否可能？

Answer 1

回答

是的，您可以先在 demo 中看到它的实际应用，如果您喜欢所看到的内容，请按以下步骤操作:

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>

它非常简单，一个搜索输入和一个带有几个选项的选择。

JavaScript

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;
    }
});

说明

首先是变量:

• searchBox:链接到 HTMLElement 搜索输入。
• countries:链接到 HTMLElement 选择。
• when:事件类型，我使用了“keyup”，这意味着当您在搜索框中按下并抬起某个键时，选择将更新。
• text, lowerText :搜索框的值(换句话说，输入文本)。第二个等于第一个但小写以进行不区分大小写的测试。
• options:选择选项objects。
• optionText, lowerOptionText : option object (ej. "Argentina") 的文本，另一个是用于不区分大小写测试的较低版本 (ej. "阿根廷")
• regex :它是一个 RegExp 对象，一个正则表达式，基本上它所做的就是测试(不区分大小写，因为第二个参数中的“i”)一些字符串是否以某个值开头，在这种情况下，该值将是输入文本。
• ma​​tch :它对选项的文本执行 RegExp 对象，这意味着它将测试输入的文本是否与选项文本的开头相同。
• contains :检查选项的文本是否包含输入的文本。

很少，已经很多了，那么，为什么我们需要 2 个测试？因为使用 searchBox 进行选择有两种可能，一种是当你开始输入“Unit..”时它应该匹配“United States of America”(regexp)，另一种是你只输入“america”它应该也匹配“美利坚合众国”(包含)

因此，它会检查两个测试，如果其中一个为真，它将选择该选项。 (它也会返回，这样它就不会继续执行代码)

默认情况下，如果没有测试为真，它将选择 select 的第一个元素。

希望对您有所帮助:)