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

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

0 голосов
/ 27 октября 2019

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

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

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

I). Сначала я ввел букву 'a'

, затем вывод будет 

 - abcd
 - aaa
 - aabb

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

Ответы [ 2 ]

1 голос
/ 27 октября 2019

Просто очищайте ваш массив 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 голос
/ 27 октября 2019

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