Question

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

当前代码可以作为小提琴 - 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);

由于某种原因，小提琴不起作用，所以在你的实际环境中试试

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

1 个答案: