正文

学会用JS打造实用仿微信联系人列表，轻松实现动态排序与搜索功能

/0 浏览量
0530

在移动应用和网页开发中，仿微信联系人列表是一个非常实用的功能。它不仅能够帮助用户快速找到联系人，还能提供便捷的搜索和排序功能。本文将带你一步步学会如何使用JavaScript（JS）打造一个这样的联系人列表。

一、准备工作

在开始之前，你需要准备以下工具和资源：

  1. HTML：用于构建页面结构。
  2. CSS：用于美化页面样式。
  3. JavaScript：用于实现动态交互功能。

二、页面结构

首先，我们需要构建一个基本的联系人列表页面。以下是一个简单的HTML结构示例：

<div id="contact-list">
  <input type="text" id="search-box" placeholder="搜索联系人...">
  <ul id="contacts">
    <!-- 联系人列表将在这里动态生成 -->
  </ul>
</div>

三、样式设计

接下来，我们可以使用CSS来美化页面。以下是一个简单的样式示例：

#contact-list {
  width: 300px;
  margin: 0 auto;
}

#search-box {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

#contacts {
  list-style: none;
  padding: 0;
}

#contacts li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

四、JavaScript实现

现在，我们来编写JavaScript代码，实现动态排序与搜索功能。

1. 联系人数据

首先，我们需要准备一些联系人数据。以下是一个简单的JSON对象示例：

const contacts = [
  { name: "张三", phone: "13800138000" },
  { name: "李四", phone: "13900139000" },
  { name: "王五", phone: "13700137000" },
  // ...更多联系人
];

2. 动态生成联系人列表

接下来，我们需要编写一个函数，用于根据联系人数据动态生成列表项：

function generateContactList(contacts) {
  const ul = document.getElementById("contacts");
  ul.innerHTML = ""; // 清空列表

  contacts.forEach(contact => {
    const li = document.createElement("li");
    li.textContent = contact.name;
    ul.appendChild(li);
  });
}

3. 实现搜索功能

现在，我们需要实现搜索功能。当用户在搜索框中输入关键词时，我们需要过滤联系人列表，只显示匹配的联系人：

function searchContacts(keyword) {
  const filteredContacts = contacts.filter(contact =>
    contact.name.toLowerCase().includes(keyword.toLowerCase())
  );
  generateContactList(filteredContacts);
}

4. 实现排序功能

最后，我们需要实现排序功能。这里我们可以根据联系人的姓名进行排序：

function sortContacts() {
  contacts.sort((a, b) => a.name.localeCompare(b.name));
  generateContactList(contacts);
}

5. 绑定事件

现在，我们需要将事件绑定到搜索框和排序按钮上：

document.getElementById("search-box").addEventListener("input", event => {
  searchContacts(event.target.value);
});

document.getElementById("sort-btn").addEventListener("click", sortContacts);

五、总结

通过以上步骤，我们已经成功实现了一个仿微信联系人列表，包括动态排序与搜索功能。你可以根据自己的需求，进一步扩展和优化这个功能，例如添加分页、分组显示等。

希望本文能帮助你掌握JavaScript在实现联系人列表方面的应用。祝你学习愉快！

-- 展开阅读全文 --