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>

Answer 2

        <body>
          <input type="text" oninput="nameHandler()" placeholder="Enter name">
        
          <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>
    
    
      <script>
        const users = [
          {
            id: 1,
            name: 'Bebe',
            age: 17,
            telephone: '0495330998',
            City: 'London'
          },
          {
            id: 2,
            name: 'Ariana',
            age: 24,
            telephone: '0495330990',
            City: 'Dublin'
          }
        ];
    
        function nameHandler() {
          const resItems = users.filter(item => item.name.toLowerCase().indexOf(event.currentTarget.value.toLowerCase()) >= 0);
          const myNodeList = document.querySelectorAll('.flexcontainer article')
    
          if(resItems.length === 0) {
            for (let i = 0; i < myNodeList.length; i++) {
              myNodeList[i].hidden = true;
            }
            return;
          }
    
          if(event.currentTarget.value === "") {
            for (let i = 0; i < myNodeList.length; i++) {
              myNodeList[i].hidden = false;
            }
            return;
          }
    
          for (let i = 0; i < myNodeList.length; i++) {
            resItems.forEach(item => {
              if(item.id == myNodeList[i].dataset.id) {myNodeList[i].hidden = false}
              else {myNodeList[i].hidden = true}
            }) 
          }
        }
    
      </script>
    </body>

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

2 个答案: