Question

给定一个包含未知数量的选项元素的下拉列表：

<select id="ddlDropDown">
    <option value="text1">Some text</option>
    <option value="text2">Some text</option>
    <option value="text3">Some text</option>
    ...
    <option value="textN">Some text</option>

给定一个文本框，我可以输入一个值：

<input type=text id="txtTextBox" onkeyup="selectDDL();"/>

并给出了脚本功能：

function selectDDL(){
    var txtElem = document.getElementById("txtTextBox");
    var ddlElem = document.getElementById("ddlDropDown");

    var typedText = txtElem.value;
    //magic happens here

}

如何使用纯粹的javascript，选择与文本框中的文本匹配的第一个选项而不遍历整个集合？

也就是说，假设我有500个下拉选项元素，其随机值介于500和1500之间，我如何获取并选择与用户输入的内容匹配的第一个选项（在列表中，而不是按顺序）多远？

因此，如果它们是三个项目：下拉列表中的1030,1012和1013以及用户类型：

1：1030被选中。

10：1030仍然被选中

选择

101：1012

1013：1013被选中

澄清：没有迭代集合，类似于jquery的^ = operator

Answer 1

您可以使用带属性选择器的开头。只有代码问题是我没有从选择器转义任何特殊字符。因此，如果用户输入ValueError: iterable must yield integers，它就会爆炸。

＆＃13;

document.querySelector("#x").addEventListener("keyup", function(){
  //code to filter out the options
  var txt = this.value;
  var opts = document.querySelectorAll("#ddlDropDown option[value^='" + txt + "']");
  //code to display the options for demo
  var out = Array.prototype.slice.call( opts ).map(function (x) {return x.value});
  document.querySelector("p").innerHTML = out.join("<br/>");
});

＆＃13;

Answer 2

您不需要jQuery来使用^=，只需将querySelectorAll与attribute prefix selector一起使用：

var texts = document.querySelectorAll("[value^='text']");
console.log(texts);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<select id="ddlDropDown">
  <option value="text1">Some text</option>
  <option value="text2">Some text</option>
  <option value="text3">Some text</option>
  <option value="textN">Some text</option>
  <option value="notText">123456</option>
</select>

Answer 3

我会使用string#indexOf方法查看是否匹配。

function selectDDL() {
    var txtElem = document.getElementById("txtTextBox");
    var ddlElem = document.getElementById("ddlDropDown");

    var typedText = txtElem.value;
    var options = document.querySelectorAll("#ddlDropDown option");
    var matches = [];
    for (var i = 0; i < 3; i++) {
        if (options[i].innerHTML.indexOf(typedText) == 0) {
            matches.push(options[i]);
        }
    }
    matches[0].setAttribute("selected", "selected");

}

Answer 4

依赖带[value ^ = ...]的选择器的人将通过其value属性而不是其文本找到一个选项。没有用于通过文本选择选项的CSS选择器。 jQuery支持“has”和“contains”，但使用迭代来实现这些功能。

只是为了一个有趣的选择，但可能不可取：innerHTML很慢，当select标签内部有其他标签而不是选项时，这会出错：

var html = ddlElem.innerHTML; 
var idx = html.indexOf('>'+typedText);
ddlElem.selectedIndex = idx === -1
    ? -1
    : html.substr(0, idx).match(/\<option/g).length - 1;

Javascript：下拉列表，获取第一个元素值LIKE？

4 个答案: