js手机通讯录带搜索排序

基础概念

手机通讯录带搜索排序是指在前端应用中实现一个功能，允许用户查看、搜索和排序手机通讯录中的联系人信息。这通常涉及到以下几个基础概念：

前端开发：使用HTML、CSS和JavaScript等技术构建用户界面。
数据绑定：将数据模型与视图进行绑定，以便在数据变化时自动更新视图。
搜索功能：通过用户输入的关键字过滤显示的联系人列表。
排序功能：根据特定字段（如姓名、电话号码等）对联系人列表进行排序。

类型与应用场景

类型：

本地存储：联系人数据存储在本地设备上。
远程存储：联系人数据存储在服务器端，通过网络请求获取。

应用场景：

个人通讯录应用：帮助用户管理个人联系人。
企业通讯录应用：方便员工查找同事联系方式。
社交应用：集成通讯录功能，便于用户添加好友。

示例代码

以下是一个简单的JavaScript示例，展示如何实现一个带有搜索和排序功能的手机通讯录：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通讯录</title>
    <style>
        .contact {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <input type="text" id="search" placeholder="搜索联系人...">
    <button onclick="sortByName()">按姓名排序</button>
    <div id="contacts"></div>

    <script>
        const contactsData = [
            { name: '张三', phone: '1234567890' },
            { name: '李四', phone: '0987654321' },
            { name: '王五', phone: '1122334455' },
            // 更多联系人数据...
        ];

        function renderContacts(filteredContacts) {
            const contactsDiv = document.getElementById('contacts');
            contactsDiv.innerHTML = '';
            filteredContacts.forEach(contact => {
                const contactDiv = document.createElement('div');
                contactDiv.className = 'contact';
                contactDiv.innerHTML = `<strong>${contact.name}</strong> - ${contact.phone}`;
                contactsDiv.appendChild(contactDiv);
            });
        }

        function searchContacts() {
            const searchInput = document.getElementById('search').value.toLowerCase();
            const filteredContacts = contactsData.filter(contact => 
                contact.name.toLowerCase().includes(searchInput) || 
                contact.phone.includes(searchInput)
            );
            renderContacts(filteredContacts);
        }

        function sortByName() {
            const sortedContacts = [...contactsData].sort((a, b) => a.name.localeCompare(b.name));
            renderContacts(sortedContacts);
        }

        document.getElementById('search').addEventListener('input', searchContacts);
        renderContacts(contactsData); // 初始渲染
    </script>
</body>
</html>