当前位置：首页 > JavaScript

js实现仿百度

2026-03-01 21:35:15JavaScript

实现仿百度搜索功能

使用JavaScript实现一个仿百度的搜索功能，需要结合前端交互、API调用和结果展示。以下是关键步骤：

搜索框与自动补全

创建HTML搜索框结构，监听用户输入实现自动补全：

<input type="text" id="search-input" placeholder="输入搜索关键词">
<div id="suggestions-container"></div>

const searchInput = document.getElementById('search-input');
const suggestionsContainer = document.getElementById('suggestions-container');

searchInput.addEventListener('input', async (e) => {
    const query = e.target.value.trim();
    if (query.length > 0) {
        const suggestions = await fetchSuggestions(query);
        renderSuggestions(suggestions);
    } else {
        suggestionsContainer.innerHTML = '';
    }
});

async function fetchSuggestions(query) {
    // 实际项目中替换为真实API端点
    const response = await fetch(`/api/suggest?q=${encodeURIComponent(query)}`);
    return await response.json();
}

function renderSuggestions(items) {
    suggestionsContainer.innerHTML = items.map(item => 
        `<div class="suggestion-item">${item}</div>`
    ).join('');
}

搜索结果展示

获取搜索结果并渲染到页面：

document.getElementById('search-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const query = searchInput.value.trim();
    if (query) {
        const results = await fetchSearchResults(query);
        renderSearchResults(results);
    }
});

async function fetchSearchResults(query) {
    // 使用真实搜索API替换
    const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
    return await response.json();
}

function renderSearchResults(results) {
    const resultsContainer = document.getElementById('results-container');
    resultsContainer.innerHTML = results.map(result => `
        <div class="result-item">
            <h3><a href="${result.url}">${result.title}</a></h3>
            <p class="url">${result.displayUrl}</p>
            <p class="description">${result.snippet}</p>
        </div>
    `).join('');
}

分页功能实现

添加分页控制逻辑：

let currentPage = 1;

async function loadPage(page) {
    const query = searchInput.value.trim();
    const results = await fetch(`/api/search?q=${query}&page=${page}`);
    renderSearchResults(results);
    currentPage = page;
    updatePaginationUI();
}

function updatePaginationUI() {
    document.getElementById('current-page').textContent = currentPage;
}

样式设计要点

CSS样式参考百度风格：

#search-input {
    width: 500px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    outline: none;
}

.suggestion-item {
    padding: 8px 15px;
    cursor: pointer;
}

.result-item {
    margin: 20px 0;
    max-width: 600px;
}

.result-item h3 a {
    color: #1a0dab;
    text-decoration: none;
}

.result-item .url {
    color: #006621;
    font-size: 14px;
}

后端API对接

Node.js示例路由处理：

const express = require('express');
const app = express();

app.get('/api/search', async (req, res) => {
    const { q, page = 1 } = req.query;
    // 这里可以接入真实搜索引擎API或数据库查询
    const results = await searchDatabase(q, page);
    res.json(results);
});

app.listen(3000, () => console.log('Server running'));

性能优化建议

实现防抖减少API请求频率：

let debounceTimer;
searchInput.addEventListener('input', (e) => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        const query = e.target.value.trim();
        if (query) fetchSuggestions(query);
    }, 300);
});

缓存搜索结果减少重复请求：

const searchCache = {};

async function fetchSearchResults(query) {
    if (searchCache[query]) return searchCache[query];

    const response = await fetch(`/api/search?q=${query}`);
    const results = await response.json();
    searchCache[query] = results;
    return results;
}

以上代码实现了一个基础仿百度搜索功能，包含自动补全、结果展示和分页等核心特性。实际项目中需要根据具体需求调整API接口和样式设计。

js实现仿百度