如何在没有插件的情况下搜索选择标签html的选项 [英] How search into options of select tag html without plugin

问题描述

我使用包含所有国家/地区名称的html制作了选择标记，并且我希望使用搜索栏搜索它们的值，而不使用任何插件或附加组件，这是否可能？

解决方案

解答

是的，您可以首先在

HTML

 < input type =searchid =searchBox> 
< select id =countries> 
< option value =arg>阿根廷< / option> 
< option value =usa>美利坚合众国< / option> 
< option value =som>索马里< / option> 
< / select> 
  

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

JavaScript

  searchBox = document.querySelector（＃searchBox）; 
 countries = document.querySelector（＃countries）; 
 var when =keyup; //你可以把它改为keydown，keypress或者改变
 
 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 搜索输入。


• 国家：指向 HTMLElement 选择的链接。


• when ：事件类型时，我使用了keyup，这意味着当您按下并提起搜索框中的某个键时，该选择将会更新
。

• text，lowerText ：searchBox的值（换句话说，是输入文本）。第二个等于大小写不敏感测试的第一个但小写。


• 选项：选择选项 objects 。
  
• optionText，lowerOptionText ：选项对象（ej。Argentina）的文本和另一个是用于不区分大小写测试的较低版本（ej。argentina）


• 正则表达式：它是 RegExp对象是一个正则表达式，它基本上是测试（不区分大小写，因为第二个参数中的'i'），其中一些字符串以某个值开始，在这种情况下，值将是输入文本。


• 匹配：它执行 RegExp对象测试输入的文本是否与选项文本的开始相同。
  
• 包含：它检查选项的文本是否包含输入的文本。
>

很少，那很多，所以，为什么我们需要2次测试？因为有两种选择searchBox的可能性，一种是当你开始输入Unit ..时，它应该匹配美国（regexp），另一种是你只需键入america，它应该也匹配美利坚合众国（含）

因此，它会检查两个测试，如果其中一个是真的，它将选择该选项。 （它也会返回，所以它不会继续执行代码）

默认情况下，如果没有测试成立，它将选择select的第一个元素。 / p>

希望有助于：）

I made select tag with html which contain all the names of the countries and I want to search into their values with search bar without any plugins or add-on is that possible ?

解决方案

Answer

Yes you can, first, see it in action in this demo, if you like what you see, here's how to do it:

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>

It's pretty straight forward, a search input and a select with a few options.

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

Explanation

First, the variables:

• searchBox : link to the HTMLElement search input.
• countries : link to the HTMLElement select.
• when : event type, I used "keyup" and that means the select will update when you press and lift a key in the searchBox.
• text, lowerText : The value of the searchBox (in other words, the input text). The second one equals the first but lowercased for case insensitive testing.
• options : The select options objects.
• optionText, lowerOptionText : The text of the option object (ej. "Argentina") and the other one is the lower version for case insensitive testing (ej. "argentina")
• regex : It's a RegExp Object, a regular expression, basically what it does is it tests (case insensitive, because of the 'i' in the second parameter) wether the some string begins with some value, in this case, the value would be the input text.
• match : It executes the RegExp Object agains the option's text, that means it will test if the inputted text is the same as the beggining of the option's text.
• contains : It checks if the option's text contains the inputted text.

Few, that was a lot, so, why do we need 2 tests? Because there are two possibilities for selection with searchBox, one is that when you start typing "Unit.." it should match "United States of America"(regexp), and the other one is that you just type "america" and it should also match "United States of America"(contains)

So, it checks for both tests, and if either one is true it will select that option. (It will also return so that it doesn't continue executing code)

By default, if no test is true, it will select the first element of the select.

Hope that helps :)

这篇关于如何在没有插件的情况下搜索选择标签html的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！