如何在普通 javascript 中使用 json 数据过滤表单输入数据？

Question

I am stuck in little confusion how to fetch the specific result if I type title name in input formfield.Below is code that I have tried. I ll appreciate it.Thanks

index.html file

<form method="POST">
 <input type="text" id="searchName" class="form-control" placeholder="Lorem name">
<button  onclick="userAction(event)" class="search-icon"><img src="images/icon.png" alt="submit"></button>
  </form>

<ul id="list">

</ul>





JavaScript File
const list = document.getElementById('list');
const searchName = document.getElementById('searchName').value;

const userAction = async (event) => {
  event.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/todos')
  .then(response => response.json())
  .then(todos => {
    todos.forEach((todo) => {
    if(todo===searchName){
      const li = document.createElement('li');

      li.innerHTML = li.innerHTML = `${todo.userId} ${todo.id} ${todo.title} ${todo.completed}`;

      list.appendChild(li);
    }
    });
  })
}

Answer 1

#searchName has no value on page load and you are not updating the value inside the function, thus if condition fails.

You should take the search value inside the function.

 const list = document.getElementById('list'); const userAction = async (event) => { list.innerHTML = ''; //clear the content on each click event.preventDefault(); const searchName = document.getElementById('searchName').value.trim(); fetch('https://jsonplaceholder.typicode.com/todos').then(response => response.json()).then(todos => { todos.forEach((todo) => { if(searchName == todo.title){ const li = document.createElement('li'); li.textContent = `${todo.userId} ${todo.id} ${todo.title} ${todo.completed}`; list.appendChild(li); } }); }) }

 <form method="POST"> <input type="text" id="searchName" class="form-control" placeholder="Lorem name"> <button onclick="userAction(event)" class="search-icon"><img src="images/icon.png" alt="submit"></button> </form> <ul id="list"> </ul>