Saya mencoba membuat penampil data yang cocok secara waktu nyata. (yaitu, saya memiliki array data, ketika pengguna memasukkan string pada kotak teks, string yang cocok dari array akan ditampilkan).

Tapi di sini terjadi masalah kecil, ketika saya mencoba menampilkan data baru yang cocok, data lama juga ditambahkan dengan hasilnya.

misalnya, asumsikan bahwa array adalah => ['abcd','aaa','bcd','aabb']

SAYA). Pertama saya memasukkan huruf 'a'

Maka keluaran akan menjadi

 - abcd
 - aaa
 - aabb

II). Lalu saya tambahkan satu huruf lagi 'aa'

Keluaran yang Diharapkan:

 - aaa
 - aabb

Keluaran Dikembalikan Menurut Program:

- abcd
- aaa
- aabb
- aaa
- aabb

Ini kodenya

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>

Apa yang telah saya coba sejauh ini I. Setel ulang variabel hasil setiap kali peristiwa keyup terjadi. II. Setel element.innerHTML ke NULL setiap kali display() dipanggil.

0
ADH - THE TECHIE GUY 27 Oktober 2019, 18:58

2 jawaban

Jawaban Terbaik

Hapus saja array matchedItems Anda setiap tindakan keyup, juga penghitung Anda dimulai dari 0 , jadi baris ini for(let i=0; i<= matchedItems.length; i++) harus tanpa = atau akan memberi Anda 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 Oktober 2019, 16:13

Anda lupa menghapus larik 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 Oktober 2019, 16:11