Свойство InnerHTML добавляется вместо замены данных

Question

Я пытаюсь создать устройство отображения согласованных данных в реальном времени. (т. е. у меня есть массив данных, когда пользователь вводит строку в текстовое поле, отображаются соответствующие строки из массива).

Но здесь возникла небольшая проблема, когда я пытаюсь отобразить новые совпадающие данные, старые данные также добавляются с результатом.

например, предположим, что массив => ['abcd', 'aaa', 'bcd', 'aabb']

Я). Сначала я ввел букву «а»

Тогда выход будет

 - abcd
 - aaa
 - aabb

II ) . Затем я добавляю еще одну букву «аа»

Ожидаемый результат:

 - 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. II . Установите element.innerHTML в NULL каждый раз, когда вызывается display ().

javascript html innerhtml

0

Dream Hunter - hashADH 27 Окт 2019 в 18:58

Answer 1

Просто очищайте ваш matchedItems массив каждое действие keyup, также ваш счетчик начинается с 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>

1

Ahmed Tag Amer 27 Окт 2019 в 16:13

Answer 2

Вы забыли очистить массив 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>

1

s4k1b 27 Окт 2019 в 16:11

Свойство InnerHTML добавляется вместо замены данных

2 ответа

Похожие вопросы

Новые вопросы

javascript