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

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

当前代码以FIDLE的形式提供在-

var colors=[‘红色’、‘蓝色’、‘黑色’、‘绿色’、‘灰色’]；
var-boxHandler=document.getElementById（'box'）；
函数text完成（text）{
BoxHandler.addEventListener（'keyup'，函数（ev）{
如果（this.value.length>=2）{
var boxData=此值；
//console.log（boxData）；
对于（i=0；iIf you want）是一个自动完成的文本框，如您在注释中所述。您可以使用
datalist


如果需要，可以使用注释中提到的自动完成文本框。您可以使用
datalist



获取实例时遇到了什么问题。是否要打印实例的计数？如果匹配，则有无限while循环！小提琴已更新。我希望它像自动完成文本框一样工作。数组中可能有两个或更多匹配项。假设输入“re”在您的框中，然后“绿色”和“灰色”都将被选中。如果您没有太多元素，您可以按照其他人的建议使用。@hemantParihar他添加了验证，如果
value.length>=2，则它将匹配。顺便说一句，您很清楚在获取实例时会遇到什么问题。是否打印c实例数？如果匹配，则有无限while循环！小提琴已更新。我希望它像自动完成文本框一样工作。数组中可能有两个或更多匹配项。假设输入“re”在您的框中，然后“绿色”和“灰色”都将被选中。如果您没有太多元素，您可以按照其他人的建议使用。@hemantParihar他添加了验证，如果
value.length>=2，则它将匹配。顺便说一句，您确实有很好的观点谢谢！！我考虑过这种方法，但希望通过JavaScript实现而且不使用jQuery或任何插件。谢谢！！我想到了这种方法，但想通过JavaScript实现，而不使用jQuery或任何插件。
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];
              }
          }
       }
   });
}