答案

Question

我用html创建了包含所有国家/地区名称的select标签，我想用搜索栏搜索他们的值而没有任何插件或插件可能吗？

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搜索输入的链接。
国家/地区：指向HTMLElement选择。
当：事件类型时，我使用了“keyup”，这意味着当您按下并抬起搜索框中的某个键时，选择将会更新。
text，lowerText ：searchBox的值（换句话说，输入文本）。第二个等于第一个但是小写的不区分大小写测试。
选项：选择选项objects。
optionText，lowerOptionText ：选项object（ej。“Argentina”）的文本，另一个是不区分大小写测试的较低版本（ej。“argentina”）
正则表达式：它是一个RegExp Object，一个正则表达式，基本上它的作用是它测试（不区分大小写，因为第二个参数中的'i'）一些字符串从某个值开始，在这种情况下，值将是输入文本。
匹配：它会再次执行RegExp Object选项的文本，这意味着它将测试输入的文本是否与选项文本的开头相同。
包含：它会检查选项的文本是否包含输入的文字。

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

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

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

希望有所帮助：）

Answer 2

如果你不能使用插件或第三方脚本，你可以创建一个数组来填充选项，并使用inarray http://api.jquery.com/jquery.inarray/搜索数组，然后你需要有一个方法来选择结果和使用iterator值将其绑定回相应的select选项。

还有这篇文章：Search the options of a select, find the value, add selected to it and write it's html text on a div

Answer 3

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

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

3 个答案:

答案

HTML

的JavaScript

解释