个人中心
gpt4 book ai didi

javascript - 如何通过 "Search FIlter"代码在新创建的元素中进行 "innerHTML"搜索？

转载 作者：行者123 更新时间：2023-11-30 14:49:39 24 4
gpt4 key购买 nike

我正在创建一个允许用户创建联系人的网站，并且有一个搜索框允许用户在创建的联系人中进行搜索。

问题是当用户创建联系人和搜索时，搜索框不起作用。

当我在 HTML 文件中手动创建联系人时，代码运行良好。意思是搜索框只在HTML文件中搜索，不会在JavaScript通过innerHTML代码新建的联系人中搜索。

请用 JAVASCRIPT 代码而不是 jQuery 回答我。

这是我的代码，只有 HTML 和 JAVASCRIPT，没有 css:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Javascript Project 11</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <form id="myForm">
         <input id="create" type="text" placeholder="create">
         <button id="btn" type="submit">Submit</button>
      </form>
      <br>
      <input id="search" placeholder="search..." type="text">
      <div id="demo">
         <!--HERE IS YOUR LIST OF CONTACTS-->
         <ul id="names">
         </ul>
      </div>
      <script src="js/main.js"></script>
   </body>
</html>

Javascript 代码:

//CREATE NEW CONTACT 
//CREATE NEW LI I MEAN

document.getElementById('myForm').addEventListener('submit', createContact)

function createContact(e) {
        //input
        var menuItem = document.getElementById('menuItem');

        var newName = document.getElementById('create').value;
        var demo = document.getElementById('demo');

        demo.innerHTML +=
            '<li class=menuItem><a href="#">' + newName + '</a></li>';

        e.preventDefault();
}

//Search Filter
var searchBox = document.getElementById('search');
searchBox.addEventListener('keyup', filter);

function filter() {
        var ul = document.getElementById('names');

        var li = ul.querySelectorAll('li.menuItem');

        var searchBoxValue = document.getElementById('search').value.toUpperCase();

        for (var i = 0; i < li.length; i++) {
            var newName = document.getElementById('create').value;
            var a = li[i].getElementsByTagName('a')[0];
            if (a.innerHTML.toUpperCase().indexOf(searchBoxValue) > -1) {

                li[i].style.display = '';

            }
            else {
                li[i].style.display = 'none';
            }

        }
    }

 <!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8" />
          <title>Javascript Project 11</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
       </head>
       <body>
          <form id="myForm">
             <input id="create" type="text" placeholder="create">
             <button id="btn" type="submit">Submit</button>
          </form>
          <br>
          <input id="search" placeholder="search..." type="text">
          <div id="demo">
             <!--HERE IS YOUR LIST OF CONTACTS-->
             <ul id="names">
             </ul>
          </div>
          <script src="js/main.js"></script>
       </body>
    </html>

最佳答案

您将新项目附加到 <div id="demo">而不是 <ul id="names"> .应该是这样的:

var names = document.getElementById('names');
names.innerHTML += '<li class="menuItem"><a href="#">' + newName + '</a></li>';

//CREATE NEW CONTACT 
    //CREATE NEW LI I MEAN


    document.getElementById('myForm').addEventListener('submit', craeteContact)
    
    function craeteContact(e) {
    
        //input
        var menuItem = document.getElementById('menuItem');
    
    
        var newName = document.getElementById('create').value;
        var names= document.getElementById('names');
    
        names.innerHTML +=
            '<li class="menuItem"><a href="#">' + newName + '</a></li>';
    
        e.preventDefault();
    
    }
    

       //Search Filter
    
    var searchBox = document.getElementById('search');
    searchBox.addEventListener('keyup', filter);
    
    
    function filter() {
    
        var ul = document.getElementById('names');
    
        var li = ul.querySelectorAll('li.menuItem');
    
    
        var searchBoxValue = document.getElementById('search').value.toUpperCase();
    
        for (var i = 0; i < li.length; i++) {
            var newName = document.getElementById('create').value;
            var a = li[i].getElementsByTagName('a')[0];
            if (a.innerHTML.toUpperCase().indexOf(searchBoxValue) > -1) {
    
                li[i].style.display = '';
    
            }
            else {
                li[i].style.display = 'none';
            }
    
        }
    }
 <!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8" />
          <title>Javascript Project 11</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
       </head>
       <body>
          <form id="myForm">
             <input id="create" type="text" placeholder="create">
             <button id="btn" type="submit">Submit</button>
          </form>
          <br>
          <input id="search" placeholder="search..." type="text">
          <div id="demo">
             <!--HERE IS YOUR LIST OF CONTACTS-->
             <ul id="names">
             </ul>
          </div>
          <script src="js/main.js"></script>
       </body>
    </html>

关于javascript - 如何通过 "Search FIlter"代码在新创建的元素中进行 "innerHTML"搜索？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48360866/

24 4 0
文章推荐： c# - 通过指定方法比较两个自定义对象列表 C#
文章推荐： javascript - P5.js mousePressed() 函数不工作 :/
文章推荐： c# - 删除 tfs 上自定义安装的构建任务
文章推荐： 运行多个作业时，编译器会发出警告 clobber
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com