I am facing a problem in my code and I am not getting a solution please help me,
<input type="text">
Here Is The Script
var obj=[
{name:'sourav',age:20},
{name: 'gautam', age: 25}
]
document.querySelector('input').addEventListener('input',function(){
var text=document.querySelector('input').value.toLowerCase();
for (var i = 0; i < obj.length; i++) {
if (obj[i].name.toLowerCase().includes(text)) {
console.log(obj[i].name);
} } });
In the input field I added a listener on input, on input script will search for text includes or not in the obj (object) if true then it will print in console log ,that Is Working Fine On Small Projects only, but when obj(object) contain a huge data , then this script make a bugg, when in the input field I try to type characters more then one it take a bit time, on first character it search for condition and hold the second character to print first result, that I don't want. I think I have explained my problem if someone have a solution please suggest me.
the problem is that text is always empty in you case because is evaluated just once and is not updated on input
You can solve it by putting the text update inside the event listener like this
var obj=[
{name:'sourav',age:20},
{name: 'gautam', age: 25}
]
document.querySelector('input').addEventListener('input',function(e){
const text = e.target.value.toLowerCase()
for (var i = 0; i < obj.length; i++) {
if (text && obj[i].name.toLowerCase().includes(text)) {
console.log(obj[i].name);
} } });<input type="text" />