InnerHTML 属性附加而不是替换数据

Question

我正在尝试创建一个实时匹配数据显示器。（即，我有一个数据数组，当用户在文本框中输入一个字符串时，将显示数组中匹配的字符串）。

但是这里出现了一个小问题，当我尝试显示新的 matched-data 时，旧数据也附加了结果。

for eg, assume that the array is => ['abcd','aaa','bcd','aabb']

我）。首先我输入了字母'a'

那么输出将是

 - abcd
 - aaa
 - aabb

二）。然后我再添加一个字母 'aa'

预期输出：

 - aaa
 - aabb

返回的输出 按程序：

- abcd
- aaa
- aabb
- aaa
- aabb

这是代码

var elemContainer = ['abcd','aaa','bcd','aabb'];
var matchedItems = [];
var result = '';

function showSearchData(){
  document.getElementById('search').addEventListener('keyup',function(){
  /*console.log(this.value);*/
   var data = this.value;
   for(let i=0;i < elemContainer.length; i++){
    if(elemContainer[i].includes(data)){
      matchedItems.push(elemContainer[i]);
    }
   }
   result = '';
   console.log(result);
   displayMatchedData();
  });
}

function displayMatchedData(){
  /*result = '';*/
  document.getElementById('matched-items-container').innerHTML = '';
  for(let i=0;i<= matchedItems.length;i++){
    result += '<li>'+matchedItems[i]+'</li>';
  }
  document.getElementById('matched-items-container').innerHTML = result;
}


showSearchData();

<input type="text" id="search" />
<ul id="matched-items-container"></ul>

到目前为止我尝试了什么 I. 每当 keyup 事件发生时，每次重置结果变量。二。每次调用 display() 时将 element.innerHTML 设置为 NULL。

Answer 1

您忘记清除 matchedItems 数组。

var elemContainer = ['abcd','aaa','bcd','aabb'];
var matchedItems = [];
var result = '';

function showSearchData(){
  document.getElementById('search').addEventListener('keyup',function(){
  /*console.log(this.value);*/
   var data = this.value;
   
   // here, clear the matched items array
   matchedItems = [];

   for(let i=0;i < elemContainer.length; i++){
    if(elemContainer[i].includes(data)){
      matchedItems.push(elemContainer[i]);
    }
   }
   result = '';
   console.log(result);
   displayMatchedData();
  });
}

function displayMatchedData(){
  /*result = '';*/
  document.getElementById('matched-items-container').innerHTML = '';
  for(let i=0;i<= matchedItems.length;i++){
    result += '<li>'+matchedItems[i]+'</li>';
  }
  document.getElementById('matched-items-container').innerHTML = result;
}


showSearchData();

<input type="text" id="search" />
<ul id="matched-items-container"></ul>

Answer 2

只需在每个 keyup 操作中清除您的 matchedItems 数组，您的计数器也从 0 开始，所以这一行 for(let i=0; i<= matchedItems.length; i++) 必须没有 = 否则它会给你undefined

var elemContainer = ['abcd','aaa','bcd','aabb'];
var matchedItems = [];
var result = '';

function showSearchData(){
  document.getElementById('search').addEventListener('keyup',function(){
  
  matchedItems = [];
  
   var data = this.value;
   for(let i=0;i < elemContainer.length; i++){
    if(elemContainer[i].includes(data)){
      matchedItems.push(elemContainer[i]);
    }
   }
   result = '';
   console.log(result);
   displayMatchedData();
  });
}

function displayMatchedData(){
  /*result = '';*/
  document.getElementById('matched-items-container').innerHTML = '';
  for(let i=0;i< matchedItems.length;i++){
    result += '<li>'+matchedItems[i]+'</li>';
  }
  document.getElementById('matched-items-container').innerHTML = result;
}


showSearchData();

<input type="text" id="search" autocomplete="off" />
<ul id="matched-items-container"></ul>

InnerHTML 属性附加而不是替换数据

InnerHTML Property Appending Instead of Replacing Data

html

javascript

innerhtml

InnerHTML 属性 附加而不是替换数据

InnerHTML Property Appending Instead of Replacing Data

html

javascript

innerhtml

InnerHTML 属性附加而不是替换数据