无法使用JavaScript输入搜索动态更改HTML内容？

我使用搜索框来搜索联系人的详细信息。最初有4个联系人：

1）

“Jonathan Buell”，5804337551，“家庭”

2）

“帕特里克·丹尼尔”，8186934432，“工作”

3）

“Lorraine Winter”，3138211928，“工作”

4）

“康斯坦斯·里德”，3138211928，“家族”

现在假设，如果我在输入框中键入

j

，它应该只显示

Jonathan Buell

如果我在输入框中键入

Lorr

，那么它应该显示

Lorraine Winter

联系人详细信息。如果用户类型

xyz

中的字符串不匹配，则不应显示任何联系人

我试图实现上述搜索功能，但它不会动态更改内容，也不会观察到任何更改

Index.html：

var数组=[]；
职能人员（全名、编号、组）{
this.fullName=fullName；
这个数字=数字；
this.group=组；
array.push（这个）；
}
变量p1=新人（“Jonathan Buell”，5804337551，“家庭”）；
变量p2=新人（“帕特里克·丹尼尔”，8186934432，“工作”）；
变量p3=新人（“Lorraine Winter”，3138211928，“工作”）；
var p4=新人（“康斯坦斯·里德”，3138211928，“家庭”）；
console.log（数组）；
函数showContacts（）{
for（数组中的变量i）{
var id=i；
contactlist.innerHTML+=
`

名称：`+array[i].全名+`

编号：`+数组[i]。编号+`

组：`+数组[i]。组+`

编辑
删除
`
}
}
showContacts（）；
函数搜索（）{
var search=document.getElementById（“search”）.value；
contactlist.innerHTML=''；
for（数组中的变量i）{
if（数组[i].fullName.toLowerCase（）.includes（search.toLowerCase（）））{
var id=i；
contactlist.innerHTML=
`

名称：`+array[i].全名+`

编号：`+数组[i]。编号+`

组：`+数组[i]。组+`

编辑
删除

`;
}
}
}

---

您可以使用这个，它与jquery完美配合

$(".search").on("input",function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;

        // Loop through the comment list
        $("#contactlist .main_div").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();

                // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });
    });

$（.search”）.on（“输入”，函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this）.val（），count=0；
//循环浏览注释列表
$（“#contactlist.main_div”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
$（this.fadeOut（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.show（）；
计数++；
}
});
});

当你添加div时，给父div一个类，如下所示

for (var i in array) {
    if (array[i].fullName.toLowerCase().includes(search.toLowerCase())) {
      var id = i;
      contactlist.innerHTML =
        `
                        <ul>
                        <div class="main_div">
                        <p>Name: ` + array[i].fullName + `</p>
                        <p>Number: ` + array[i].number + `</p>
                        <p>Group: ` + array[i].group + `</p>
                        <button type="button" class="btn btn-warning" onclick="editContact(` + id + `)">Edit</button>
                        <button type="button" class="btn btn-danger">Delete</button>
                        </div>
                        </ul>
                        `;
    }
  }
}

for（数组中的变量i）{
if（数组[i].fullName.toLowerCase（）.includes（search.toLowerCase（）））{
var id=i；
contactlist.innerHTML=
`

名称：`+array[i].全名+`

编号：`+数组[i]。编号+`

组：`+数组[i]。组+`

编辑
删除

`;
}
}
}

搜索输入本身对JavaScript数组或其内容一无所知。您的

search（）

函数永远不会被调用；在输入上放置搜索id不会将该输入与函数相关联

您可以做的是在搜索输入中添加一个事件侦听器，用于侦听

enter

keypress，然后可以过滤您的人员数组

大概是这样的：

// You imported jQuery, so you may as well use $("#search") instead of document.getElementById("search")
var search_input = $('#search')

search_input.keydown(function (event) {
    if (event.which === 13) {
        // If the enter key was pressed
        search()
    }
})

function search(event) {
    event.preventDefault();

    var search_val = search_input.val();

    contactlist.innerHTML = '';

    for(var i in array) {
        if (array[i].fullName.toLowerCase().includes(search_val.toLowerCase())) {
            var id = i;
            contactlist.innerHTML = `
                <ul>
                    <div>
                        <p>Name: `+ array[i].fullName +`</p>
                        <p>Number: `+ array[i].number +`</p>
                        <p>Group: `+ array[i].group +`</p>
                        <button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
                        <button type="button" class="btn btn-danger">Delete</button>
                    </div>
                </ul>
            `;
        }
    }
}

//您导入了jQuery，因此您最好使用$（“#search”）而不是document.getElementById（“search”）
var search_input=$（“#search”）
搜索\输入.按键按下（功能（事件）{
if（event.which==13）{
//如果按下回车键
搜索（）
}
})
功能搜索（事件）{
event.preventDefault（）；
var search_val=search_input.val（）；
contactlist.innerHTML=''；
for（数组中的变量i）{
if（数组[i].fullName.toLowerCase（）.includes（search_val.toLowerCase（）））{
var id=i；
contactlist.innerHTML=`

名称：`+array[i].fullName+`

编号：`+数组[i]。编号+`

组：`+数组[i]。组+`

编辑
删除

`;
}
}
}

你真的不应该束缚一个类构造函数来推送到外部数组，而是应该把

新人（…）

推到数组中。你在javascript代码中使用``来包装html代码。这可能是您出现问题的原因之一。我没有看到任何事件附加到您的搜索输入更改调用

search（）

侧注，请不要这样做：

名称：`+array[I]。全名+`

，这是。相反，请执行以下操作：${array[i].fullName}

@Striped为什么要调用

search（）

假设如果我键入

j

，它应该动态更改联系人列表，并显示

Jonathan Buell

，因为

j

与

Jonathan Buell

的

j

匹配，您可以通过每个用户循环添加类，请尝试一下，让我知道我正在尝试复制此项目的功能->检查实时演示->您是否看到了演示和

search（）

的代码它没有显式调用，但仍然可以