javascript - 记录数组中匹配字符串的所有实例 - JavaScript

Question

我有一个数组，我想查找在文本框中键入的匹配字符串的所有实例。

当前代码可作为 fiddle 使用 - https://jsfiddle.net/Mithun6319/Lzmekhph/

var colors = ['Red', 'Blue', 'Black', 'Green', 'Grey'];

var boxHandeler = document.getElementById('box');

function textComplete(text) {
    boxHandeler.addEventListener('keyup', function (ev) {
       if (this.value.length >= 2) {
          var boxData = this.value;
          //console.log(boxData);
          for(i=0;i<colors.length;i++){
              while(colors[i].match(boxData)){
                  console.log[i];
              }
          }
       }
   });
}

Answer 1

如果您想要的是一个自动完成文本框，正如您在评论中提到的那样。您可以使用datalist

<input list='colors' />

<datalist id="colors">
  <option value="Red">
  <option value="Blue">
  <option value="Black">
  <option value="Green">
  <option value="Grey">
</datalist>

您可以从下拉列表中选择或键入您将看到过滤的结果

以下是如何做到这一点javascript。这是您的代码的修改版本

<input type="text" id="box" onkeyup="matchThis(this.value)"/>

<script>
var colors = ['Red', 'Blue', 'Black', 'Green', 'Grey'];

var boxHandeler = document.getElementById('box');

function matchThis(value){
        if (value.length >= 2) {
            var boxData = value;
            //console.info("Search String "+boxData);           
            var pattern = new RegExp(boxData,'gi');
            for(i=0;i<colors.length;i++){               
                if(colors[i].match(pattern)){
                    console.warn(colors[i]);
                }               
            }
        }
}
</script>

您的代码存在很多问题。首先，当找到匹配时，您调用无限循环(如@ananth 的评论中所述)。您试图以数组形式访问 console.log

console.log[i];

而不是

console.log(i);

由于某种原因 fiddle 无法工作，因此请在实际环境中尝试一下