Question

我使用搜索框搜索人员的联系方式。最初有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，则字符串不匹配，则不应显示任何联系人。

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

的index.html：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

我的应用的屏幕截图：

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

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

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

2 个答案: