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

【问题标题】：Cannot change HTML content dynamically using JavaScript input search?无法使用 JavaScript 输入搜索动态更改 HTML 内容？
【发布时间】：2018-02-07 14:40:36
【问题描述】：

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

1)"Jonathan Buell",5804337551,"family"

2)"Patrick Daniel",8186934432,"work"

3)"Lorraine Winter",3138211928,"work"

4) "Constance Reed",3138211928,"family"

现在让我们说，如果我在输入框中输入j，它应该只显示Jonathan Buell，如果我在输入中输入Lorr，那么它应该显示Lorraine Winter 联系方式。如果用户键入xyz 时字符串不匹配，则不应显示任何联系人。

我尝试实现上述搜索功能，但它不会动态更改内容，没有观察到任何变化。

索引.html：

var array = [];

function Person(fullName, number, group) {
  this.fullName = fullName;
  this.number = number;
  this.group = group;
  array.push(this);
}

var p1 = new Person("Jonathan Buell", 5804337551, "family");
var p2 = new Person("Patrick Daniel", 8186934432, "work");
var p3 = new Person("Lorraine Winter", 3138211928, "work");
var p4 = new Person("Constance Reed", 3138211928, "family");

console.log(array);

function showContacts() {
  for (var i in array) {
    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>
    	        `
  }
}

showContacts();

function search() {
  var search = document.getElementById("search").value;

  contactlist.innerHTML = '';

  for (var i in array) {
    if (array[i].fullName.toLowerCase().includes(search.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>
    			        `;
    }
  }
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  <div class="input-group">
    <input type="text" id="search" class="form-control" placeholder="Search">
  </div>
  </form>
  </div>

  <div id="contactlist">

  </div>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

我的应用截图：

【问题讨论】：

你真的不应该将类构造函数绑定到推送到外部数组，而是将new Person(...) 推送到数组中。
您在 javascript 代码中使用 `´ 来包装 html 代码。也许这是您遇到问题的原因之一。
我没有看到任何事件附加到您的搜索输入更改调用 search()
旁注，不要这样做：<p>Name: `+ array[i].fullName + `</p>，template strings is interpolation 的全部优势。相反，请<p>Name: ${array[i].fullName}</p>
@Striped 为什么要调用search() 假设我输入j 那么它应该动态更改联系人列表并将Jonathan Buell 显示为j 匹配到J 的Jonathan Buell

标签： javascript html css

【解决方案1】：

你可以使用这个，它与 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++;
            }
        });
    });

当你添加 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>
                        `;
    }
  }
}

【讨论】：

使用您添加的类，您可以遍历每个用户，试一试并告诉我
我正在尝试复制该项目的功能 -> github.com/snwolak/contact-list-app/blob/… 查看现场演示 -> snwolak.github.io/contact-list-app
你看到演示了吗？search() 的代码没有被显式调用，但它在演示中仍然有效，为什么会这样？
这个也一样，试试看
看小提琴 (jsfiddle.net/tj0gcnf4/10) 我用你的例子做的，效果很好

【解决方案2】：

就其本身而言，您的搜索输入对您的 JavaScript 数组或其内容一无所知。并且您的 search() 函数永远不会被调用；在您的输入上放置搜索 id 不会将该输入与函数相关联。

您可以做的是向您的搜索输入添加一个事件侦听器，该侦听器侦听enter 按键，然后您的人员数组可以被过滤。

类似这样的：

// 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>
            `;
        }
    }
}

【讨论】：

我正在尝试复制这个项目的功能 -> github.com/snwolak/contact-list-app/blob/… 可以在这里看到项目的现场演示 -> snwolak.github.io/contact-list-app
您是否看到了演示和 search() 的代码，它没有被显式调用，但在演示中仍然有效，为什么会这样？
在演示中起作用的原因是因为在index.html 他们的输入具有onkeyup="search()" 的属性
所以我应该在我的输入中调用search()，然后它会起作用吗？
是的，但如果没有附加代码，您将无法获得建议