如何实现Autocomplete搜索框并添加搜索按钮功能？

来源：IPIPP.com作者：陈平安时间：05-21

导读：本期聚焦于小伙伴创作的《如何实现Autocomplete搜索框并添加搜索按钮功能？》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何实现Autocomplete搜索框并添加搜索按钮功能？》有用，将其分享出去将是对创作者最好的鼓励。

为Autocomplete搜索添加搜索按钮功能

在常见的搜索场景中，Autocomplete（自动补全）功能可以提升用户输入效率，但很多时候用户也习惯通过点击搜索按钮触发搜索操作。本文将介绍如何在基础的Autocomplete实现上，添加搜索按钮功能，实现补全提示与按钮触发搜索的协同工作。

基础Autocomplete实现

首先我们先实现一个基础的Autocomplete搜索框，包含输入框、补全下拉列表，后续再在此基础上添加搜索按钮。这里使用原生HTML、CSS和JavaScript实现，避免依赖第三方库，方便理解核心逻辑。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带搜索按钮的Autocomplete</title>
    <style>
        .search-container {
            position: relative;
            width: 400px;
            margin: 50px auto;
        }
        .search-input {
            width: 100%;
            padding: 10px 60px 10px 15px; /* 右侧预留按钮空间 */
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .search-btn {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 50px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 14px;
        }
        .search-btn:hover {
            background-color: #0056b3;
        }
        .autocomplete-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            border: 1px solid #ccc;
            border-top: none;
            background-color: white;
            z-index: 1000;
            max-height: 200px;
            overflow-y: auto;
            display: none;
        }
        .autocomplete-item {
            padding: 10px 15px;
            cursor: pointer;
        }
        .autocomplete-item:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="search-container">
        <input type="text" class="search-input" id="searchInput" placeholder="请输入搜索内容">
        <button class="search-btn" id="searchBtn">搜索</button>
        <div class="autocomplete-list" id="autocompleteList"></div>
    </div>

    <script>
        // 模拟的补全数据源
        const dataSource = [
            "JavaScript教程",
            "Java基础入门",
            "Python爬虫实战",
            "前端开发笔记",
            "后端架构设计",
            "数据库优化技巧",
            "算法与数据结构",
            "移动端开发指南"
        ];

        const searchInput = document.getElementById("searchInput");
        const autocompleteList = document.getElementById("autocompleteList");
        const searchBtn = document.getElementById("searchBtn");

        // 显示补全列表
        function showAutocompleteList(keyword) {
            autocompleteList.innerHTML = "";
            if (!keyword) {
                autocompleteList.style.display = "none";
                return;
            }
            // 过滤匹配的数据
            const matchedItems = dataSource.filter(item => 
                item.toLowerCase().includes(keyword.toLowerCase())
            );
            if (matchedItems.length === 0) {
                autocompleteList.style.display = "none";
                return;
            }
            // 生成补全项
            matchedItems.forEach(item => {
                const div = document.createElement("div");
                div.className = "autocomplete-item";
                div.textContent = item;
                // 点击补全项填充输入框
                div.addEventListener("click", () => {
                    searchInput.value = item;
                    autocompleteList.style.display = "none";
                });
                autocompleteList.appendChild(div);
            });
            autocompleteList.style.display = "block";
        }

        // 输入框输入事件监听
        searchInput.addEventListener("input", () => {
            const keyword = searchInput.value.trim();
            showAutocompleteList(keyword);
        });

        // 点击页面其他区域隐藏补全列表
        document.addEventListener("click", (e) => {
            if (!e.target.closest(".search-container")) {
                autocompleteList.style.display = "none";
            }
        });
    </script>
</body>
</html>

上面的代码实现了一个基础的Autocomplete搜索框，输入框输入内容时会自动匹配数据源中的内容并展示下拉补全列表，点击补全项可以自动填充输入框。同时我们在输入框右侧预留了搜索按钮的位置，不过此时按钮还没有绑定搜索逻辑。

添加搜索按钮功能

接下来我们为搜索按钮绑定点击事件，实现点击按钮触发搜索的逻辑。搜索逻辑可以自定义，比如打印搜索内容、发起接口请求等，这里我们先以控制台打印搜索内容为例，后续可以根据实际需求扩展。

只需要在之前的<script>标签中添加按钮的点击事件监听即可，完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带搜索按钮的Autocomplete</title>
    <style>
        .search-container {
            position: relative;
            width: 400px;
            margin: 50px auto;
        }
        .search-input {
            width: 100%;
            padding: 10px 60px 10px 15px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .search-btn {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 50px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 14px;
        }
        .search-btn:hover {
            background-color: #0056b3;
        }
        .autocomplete-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            border: 1px solid #ccc;
            border-top: none;
            background-color: white;
            z-index: 1000;
            max-height: 200px;
            overflow-y: auto;
            display: none;
        }
        .autocomplete-item {
            padding: 10px 15px;
            cursor: pointer;
        }
        .autocomplete-item:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="search-container">
        <input type="text" class="search-input" id="searchInput" placeholder="请输入搜索内容">
        <button class="search-btn" id="searchBtn">搜索</button>
        <div class="autocomplete-list" id="autocompleteList"></div>
    </div>

    <script>
        const dataSource = [
            "JavaScript教程",
            "Java基础入门",
            "Python爬虫实战",
            "前端开发笔记",
            "后端架构设计",
            "数据库优化技巧",
            "算法与数据结构",
            "移动端开发指南"
        ];

        const searchInput = document.getElementById("searchInput");
        const autocompleteList = document.getElementById("autocompleteList");
        const searchBtn = document.getElementById("searchBtn");

        function showAutocompleteList(keyword) {
            autocompleteList.innerHTML = "";
            if (!keyword) {
                autocompleteList.style.display = "none";
                return;
            }
            const matchedItems = dataSource.filter(item => 
                item.toLowerCase().includes(keyword.toLowerCase())
            );
            if (matchedItems.length === 0) {
                autocompleteList.style.display = "none";
                return;
            }
            matchedItems.forEach(item => {
                const div = document.createElement("div");
                div.className = "autocomplete-item";
                div.textContent = item;
                div.addEventListener("click", () => {
                    searchInput.value = item;
                    autocompleteList.style.display = "none";
                });
                autocompleteList.appendChild(div);
            });
            autocompleteList.style.display = "block";
        }

        searchInput.addEventListener("input", () => {
            const keyword = searchInput.value.trim();
            showAutocompleteList(keyword);
        });

        document.addEventListener("click", (e) => {
            if (!e.target.closest(".search-container")) {
                autocompleteList.style.display = "none";
            }
        });

        // 搜索按钮点击事件：执行搜索逻辑
        searchBtn.addEventListener("click", () => {
            const searchValue = searchInput.value.trim();
            if (!searchValue) {
                alert("请输入搜索内容");
                return;
            }
            // 隐藏补全列表
            autocompleteList.style.display = "none";
            // 这里可以替换为实际的搜索逻辑，比如发起接口请求
            console.log("触发搜索，搜索内容：", searchValue);
            alert("搜索内容：" + searchValue);
        });

        // 输入框回车键触发搜索，和按钮功能保持一致
        searchInput.addEventListener("keydown", (e) => {
            if (e.key === "Enter") {
                searchBtn.click();
            }
        });
    </script>
</body>
</html>

我们在代码中新增了两个逻辑：一是为搜索按钮绑定了点击事件，点击时会获取输入框的内容，若内容为空则提示用户输入，否则执行搜索逻辑（这里用控制台打印和弹窗提示模拟，实际开发中可以替换为调用搜索接口）；二是为输入框添加了回车键监听，按下回车键可以触发和点击搜索按钮相同的逻辑，符合用户的使用习惯。

功能扩展建议

上述实现已经满足了基础的Autocomplete加搜索按钮的需求，实际开发中还可以根据场景做更多扩展：

补全列表支持键盘上下键选择，提升键盘操作体验
搜索逻辑对接后端接口，实现真实的搜索功能，接口地址可以使用如http://api.ipipp.com/search这类地址（注意示例中的ippipp.com已替换为ipipp.com）
添加搜索历史记录，将用户搜索过的内容存储到本地，下次输入时优先展示历史记录
优化补全列表的展示样式，比如高亮匹配的关键词部分

Autocomplete 搜索按钮前端实现 JavaScript 原生代码

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。