JavaScript实战 - 百度搜索框提示的实现

最新推荐文章于 2025-08-01 09:29:44 发布

原创最新推荐文章于 2025-08-01 09:29:44 发布 · 1.6k 阅读

18 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

JavaScript实战案例（完整源代码）专栏收录该内容

15 篇文章

订阅专栏

作者：逍遥Sean
简介：一个主修Java的Web网站\游戏服务器后端开发者
主页：https://blog.csdn.net/Ureliable
觉得博主文章不错的话，可以三连支持一下~ 如有疑问和建议，请私信或评论留言！

前言
在Web开发中，搜索框提示（autocomplete）是提升用户体验的重要功能之一。本文将介绍如何使用JavaScript和百度搜索API实现一个简单的搜索框提示功能，让用户在输入搜索词时能够看到实时的搜索建议。

实现百度搜索框提示

技术背景

百度搜索框提示的实现涉及以下关键技术：

HTML/CSS：用于创建搜索框和样式设计。
JavaScript：通过AJAX请求获取百度搜索API返回的数据，并动态更新DOM来显示搜索建议。
百度搜索API：使用百度搜索的接口来获取搜索建议数据。

实现步骤

1. 创建基本的HTML结构

首先，我们创建一个简单的HTML页面，包含一个输入框用于输入搜索词，并用于显示搜索建议的下拉列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Baidu Search Suggestion</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="search-container">
        <input type="text" id="searchInput" placeholder="Enter your search...">
        <ul id="suggestions" class="suggestions"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式设计

使用CSS来美化搜索框和搜索建议的样式。

/* styles.css */
.search-container {
    position: relative;
    width: 300px;
    margin: 20px auto;
}

#searchInput {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}

.suggestions {
    position: absolute;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1;
}

.suggestions li {
    padding: 10px;
    cursor: pointer;
}

.suggestions li:hover {
    background-color: #f1f1f1;
}

3. JavaScript实现搜索提示功能

编写JavaScript来处理用户输入和请求百度搜索API的数据。

// script.js
const searchInput = document.getElementById('searchInput');
const suggestionsList = document.getElementById('suggestions');

searchInput.addEventListener('input', function() {
    const searchTerm = searchInput.value.trim();
    if (searchTerm.length === 0) {
        suggestionsList.innerHTML = '';
        return;
    }

    const apiUrl = `http://suggestion.baidu.com/su?wd=${searchTerm}&cb=suggestionsHandler`;
    const script = document.createElement('script');
    script.src = apiUrl;
    document.body.appendChild(script);
});

function suggestionsHandler(data) {
    const suggestions = data.s;
    const html = suggestions.map(suggestion => `<li>${suggestion}</li>`).join('');
    suggestionsList.innerHTML = html;
}