Javascript 如何制作；搜索过滤器“；在新创建的元素中按；innerHTML"；密码？_Javascript

Javascript 如何制作；搜索过滤器“；在新创建的元素中按；innerHTML"；密码？

javascript

Javascript 如何制作；搜索过滤器“；在新创建的元素中按；innerHTML"；密码？,javascript,Javascript,我正在创建一个允许用户创建联系人的网站，并且有一个搜索框，允许用户在创建的联系人中搜索问题是，当用户创建联系人并进行搜索时，搜索框不起作用当我在HTML文件中手动创建联系人时，代码运行良好。这意味着搜索框只在HTML文件中搜索，而不通过JavaScript的innerHTML代码在新创建的联系人中搜索请用JAVASCRIPT代码回答我，而不是jQuery 这是我的代码，只有HTML和JAVASCRIPT，没有css： <!DOCTYPE html> <html>

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

问题是，当用户创建联系人并进行搜索时，搜索框不起作用

当我在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项目11
提交

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>

//创建新联系人
//我的意思是创造新的李
document.getElementById（'myForm'）。addEventListener（'submit'，createContact）
函数createContact（e）{
//输入
var menuItem=document.getElementById（'menuItem'）；
var newName=document.getElementById（'create'）.value；
var demo=document.getElementById（'demo'）；
demo.innerHTML+=
“”；
e、 预防默认值（）；
}
//搜索过滤器
var searchBox=document.getElementById（'search'）；
searchBox.addEventListener（'keyup'，filter）；
函数过滤器（）{
var ul=document.getElementById（'names'）；
var li=ul.querySelectorAll（'li.menuItem'）；
var searchBoxValue=document.getElementById（'search'）.value.toUpperCase（）；
对于（变量i=0；i-1）{
li[i].style.display=''；
}
否则{
li[i].style.display='none'；
}
}
}
Javascript项目11
提交

您将新项目附加到

而不是

。应该是这样的:

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

var name=document.getElementById（'names'）；
names.innerHTML+='；

//创建新联系人
//我的意思是创造新的李
document.getElementById（'myForm'）。addEventListener（'submit'，CraetContact）
功能触点（e）{
//输入
var menuItem=document.getElementById（'menuItem'）；
var newName=document.getElementById（'create'）.value；
var names=document.getElementById（'names'）；
names.innerHTML+=
“”；
e、 预防默认值（）；
}
//搜索过滤器
var searchBox=document.getElementById（'search'）；
searchBox.addEventListener（'keyup'，filter）；
函数过滤器（）{
var ul=document.getElementById（'names'）；
var li=ul.querySelectorAll（'li.menuItem'）；
var searchBoxValue=document.getElementById（'search'）.value.toUpperCase（）；
对于（变量i=0；i-1）{
li[i].style.display=''；
}
否则{
li[i].style.display='none'；
}
}
}


Javascript项目11
提交

这是因为您将

li

元素放置在

#demo

中，而不是

#name

您应该使用

console.log（）

调试使用数组保存名称，然后搜索数组。为什么每次都从UI获取数据

var searchBox=document.getElementById（'search'）；
searchBox.addEventListener（'keyup'，filter）；
document.getElementById（'myForm'）。addEventListener（'submit'，CraetContact）
变量名称=[]；
功能触点（e）{
var menuItem=document.getElementById（'menuItem'）；
var newName=document.getElementById（'create'）.value；
var demo=document.getElementById（'demo'）；
names.push（newName.toUpperCase（））；//向数组添加新名称
demo.innerHTML+=''；
e、 预防默认值（）；
}
函数过滤器（）{
var searchValue=searchBox.value.toUpperCase（）；
对于（var i=0；i-1）{
控制台日志（“找到”）；
}
否则{
控制台日志（“未找到”）；
}
}
}


Javascript项目11
提交

您可以使用合同列表创建特殊变量。它将是一个对象数组（如果应该有多个属性）或字符串（合同名称）。然后，您可以只制作将新契约推送到现有阵列中的函数和另一个更新用户看到的内容的函数。并对该阵列进行筛选。此外，还有一个Array.prototype.filter方法可以帮助您在这种情况下引用是可选的。