javascript - 在数组/对象中搜索 Javascript + 在屏幕上显示

Question

我得到了一个对象和 HTML 代码(见代码)。这个想法是我通过搜索字段动态搜索对象+在屏幕上显示它(见图)。例如，当我键入“Ariana”时，“Bebe”的数据将消失。所有这些都必须实时完成(当我在页面上时)。该页面已经动态加载，现在我只需要能够搜索。 enter image description here

代码对象:

const users= [
    {
        id: 1,
        name: Bebe,
        age: 17,
        telephone: 0495330998,
        City: Londen
    },
    {
        id: 2,
        name: Ariana,
        age: 24,
        telephone: 0495330990,
        City: Dublin
    }
];

代码 HTML

<div class="flexcontainer">
   <article data-id="1">
      <h3>Bebe</h3>
      <div class="info">
         <p>17</p>
         <p>0495330998</p>
         <p>London</p>
      </div>
   </article>
   <article data-id="2">
      <h3>Ariana</h3>
      <div class="info">
         <p>24</p>
         <p>0495330990</p>
         <p>Dublin</p>
      </div>
   </article>
</div>

Answer 1

请找到以下解决方案之一，可以有多种方法来解决这个问题。第一个片段是 JS 文件，第二个片段是 HTML 文件。

let templateString = `<article data-id="{{id}}">
      <h3>{{name}}</h3>
      <div class="info">
         <p>{{age}}</p>
         <p>{{telephone}}</p>
         <p>{{city}}</p>
      </div>
   </article>`;
       

    const users = [
        {
            id: 1,
            name: 'Bebe',
            age: 17,
            telephone: 0495330998,
            city: 'London'
        },
        {
            id: 2,
            name: 'Ariana',
            age: 24,
            telephone: 0495330990,
            city: 'Dublin'
        }
    ];


     function firedOnChange(){ 
      let value = document.getElementById('inputId').value;
      if(value.length > 0){
         let filteredUsers = users.filter((element)=>{ return element.name.match(new RegExp(value,"i")); });
         render(filteredUsers);
      } else {
          render(users);
      }
     }
    
    function render(users){
       let displayHTML = ``;
       users.forEach((element)=>{
        displayHTML = displayHTML + templateString
        .replace('{{id}}',element.id)
        .replace('{{name}}',element.name)
        .replace('{{age}}',element.age)
        .replace('{{telephone}}',element.name)
        .replace('{{city}}',element.city)
        })
       const HTMLelement = document.createElement('div');
       HTMLelement.innerHTML = displayHTML;
      document.getElementById('articleContainer').innerHTML = ''; document.getElementById('articleContainer').appendChild(HTMLelement);
    }
    
    render(users);

<input type="text" onkeyup="firedOnChange()" id="inputId">
 <div class="flexcontainer" id="articleContainer">
 
 </div>