記錄數組中匹配字符串的所有實例 - JavaScript

Question

我有一個數組，我想查找在文本框中鍵入的匹配字符串的所有實例。

當前的代碼可以作爲撥弄IN-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); 

出於某種原因，小提琴沒有工作，所以嘗試在你的實際環境