如何在不使用插件的情况下搜索HTML选择标记选项

Question

我使用HTML制作了一个包含所有国家名称的选择标签，我想使用搜索栏搜索它们的值，而不需要任何插件或附加组件，这是否可能？

- Maroxtn

---

你应该发布你已经有的代码或类似的示例。 - DylanH

我看不出为什么要对代码进行投票否决，因为代码会超过100行，这对于一个单页来说太长了，而且涉及到190个国家也太多了。 - Maroxtn

默认情况下，您应该能够开始输入并填充以您输入的字母开头的选项。 - DylanH

顺便说一下，你可以发布一些示例代码，我没有给你投反对票。 - DylanH

像你这样的普通问题只会吸引负评。那里面没有一点代码。它发布的方式让我们觉得你想让别人为你编写代码。 - emerson.marini

Answer 1

回答

是的，你可以。首先，在这个演示中看到它的实际效果。如果你喜欢你所看到的内容，下面是如何实现它的方法：

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 : 选择框中的选项对象。
• optionText, lowerOptionText : 选项对象的文本（例如 "阿根廷"）以及它的小写字母版本，用于不区分大小写的测试（例如 "argentina"）。
• regex : 它是一个RegExp Object，即一个正则表达式，基本上它的作用是测试（不区分大小写，因为第二个参数中有'i'）某个字符串是否以某个值开头，在这种情况下，该值将是输入文本。
• match : 它执行RegExp Object并对选项的文本进行测试，这意味着它将测试输入的文本是否与选项的文本开头相同。
• contains : 它检查选项的文本是否包含输入的文本。

哇，这是很多的内容，那么我们为什么需要进行两个测试呢？因为搜索框有两种选择可能性，一种是当您开始输入"Unit.."时，它应该匹配到"美利坚合众国"(正则表达式)，另一种是您只需输入"america"，它也应该匹配到"美利坚合众国"(包含)。

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

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

希望能有所帮助 :)

- undefined

---

@undefined 我不同意需要2个测试，因为如果一个选项与开头匹配，则该文本也被包含在内。 - Luka Govedič

当选中状态改变时（使用select的onChange属性），我调用函数。我尝试使用onchange事件来调用您的函数，但它从未被调用@undefined。 - koorosh safeashrafi

对我没有用。。它显示文本框和下拉框是分开的@undefined - Deepak Pookkote

Answer 2

如果您不想使用插件或第三方脚本，可以创建一个数组来填充选项，然后使用inarray http://api.jquery.com/jquery.inarray/搜索该数组。接下来，您需要编写一个方法来选择结果，并使用迭代器值将其与相应的选择选项联系起来。

此外，还有这篇文章：搜索选择框的选项，找到值，添加选定内容并将其HTML文本写入div中。

- DylanH

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

- Namrata S Jain