WEB-21：网站搜索功能实现

王尘宇网站建设 2026-03-25 15:42:19 3

网站搜索功能实现 是通过选择合适的搜索技术方案、设计搜索界面、实现搜索算法、优化搜索性能、提供智能搜索体验，使用户能够快速准确找到所需内容的技术开发方法。

搜索技术方案对比

方案 1：数据库搜索 ⭐⭐⭐

适用场景：

- 小型网站
- 数据量<10 万
- 预算有限
- 简单搜索需求

技术实现：

-- MySQL LIKE 搜索
SELECT * FROM products 
WHERE name LIKE '%关键词%' 
   OR description LIKE '%关键词%';

-- MySQL 全文搜索
SELECT * FROM articles 
WHERE MATCH(title, content) AGAINST('关键词' IN NATURAL LANGUAGE MODE);

优点：

✅ 简单易实现
✅ 无需额外服务
✅ 成本低

缺点：

❌ 性能差（大数据量）
❌ 功能有限
❌ 无智能提示

方案 2：Elasticsearch ⭐⭐⭐⭐⭐

适用场景：

- 中大型网站
- 数据量>10 万
- 复杂搜索需求
- 需要智能搜索

技术架构：

网站 → API → Elasticsearch → 搜索结果
              ↓
          数据同步
              ↓
          数据库

优点：

✅ 搜索速度快
✅ 功能强大
✅ 支持中文分词
✅ 智能推荐
✅ 可扩展

缺点：

❌ 学习曲线陡
❌ 需要额外服务器
❌ 维护成本高

方案 3：Algolia（SaaS） ⭐⭐⭐⭐

适用场景：

- 快速上线
- 无运维团队
- 预算充足
- 需要即搜即得

优点：

✅ 接入简单
✅ 性能好
✅ 功能全
✅ 无需运维

缺点：

❌ 按量付费
❌ 数据在第三方
❌ 长期成本高

方案 4：Meilisearch ⭐⭐⭐⭐

适用场景：

- 中小型网站
- 需要智能搜索
- 预算有限
- 开源偏好

优点：

✅ 开源免费
✅ 部署简单
✅ 中文支持好
✅ 性能好

缺点：

❌ 生态不如 ES
❌ 功能相对简单

Elasticsearch 实现方案

环境搭建 ⭐⭐⭐⭐⭐

Docker 部署：

# docker-compose.yml
version: '3'
services:
  elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:7.17.0
    environment:
      - discovery.type=single-node
      - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
    ports:
      - "9200:9200"
    volumes:
      - es_data:/usr/share/elasticsearch/data

  kibana:
    image: docker.elastic.co/kibana/kibana:7.17.0
    ports:
      - "5601:5601"
    environment:
      - ELASTICSEARCH_HOSTS=http://elasticsearch:9200

volumes:
  es_data:

索引设计 ⭐⭐⭐⭐⭐

产品索引：

PUT /products
{
  "settings": {
    "analysis": {
      "analyzer": {
        "chinese_analyzer": {
          "type": "ik_max_word",
          "tokenizer": "ik_max_word"
        }
      }
    }
  },
  "mappings": {
    "properties": {
      "id": { "type": "integer" },
      "name": { 
        "type": "text",
        "analyzer": "chinese_analyzer",
        "fields": {
          "keyword": { "type": "keyword" }
        }
      },
      "description": { 
        "type": "text",
        "analyzer": "chinese_analyzer"
      },
      "category": { "type": "keyword" },
      "price": { "type": "float" },
      "stock": { "type": "integer" },
      "created_at": { "type": "date" }
    }
  }
}

数据同步 ⭐⭐⭐⭐

同步脚本：

const { Client } = require('@elastic/elasticsearch');
const esClient = new Client({ node: 'http://localhost:9200' });

// 同步产品数据
async function syncProducts() {
  const products = await Product.findAll();

  const body = products.flatMap(product => [
    { index: { _index: 'products', _id: product.id } },
    {
      id: product.id,
      name: product.name,
      description: product.description,
      category: product.category,
      price: product.price,
      stock: product.stock,
      created_at: product.created_at
    }
  ]);

  await esClient.bulk({ body });
  console.log('产品数据同步完成');
}

// 监听数据库变化，实时同步
function setupRealtimeSync() {
  Product.afterCreate(async (product) => {
    await esClient.index({
      index: 'products',
      id: product.id,
      body: {
        id: product.id,
        name: product.name,
        description: product.description,
        category: product.category,
        price: product.price,
        stock: product.stock,
        created_at: product.created_at
      }
    });
  });

  Product.afterUpdate(async (product) => {
    await esClient.update({
      index: 'products',
      id: product.id,
      body: {
        doc: {
          name: product.name,
          description: product.description,
          category: product.category,
          price: product.price,
          stock: product.stock
        }
      }
    });
  });

  Product.afterDestroy(async (product) => {
    await esClient.delete({
      index: 'products',
      id: product.id
    });
  });
}

搜索接口实现 ⭐⭐⭐⭐⭐

基础搜索：

async function searchProducts(query, options = {}) {
  const { page = 1, limit = 20, category, minPrice, maxPrice, sort } = options;

  const searchQuery = {
    index: 'products',
    body: {
      from: (page - 1) * limit,
      size: limit,
      query: {
        bool: {
          must: [
            {
              multi_match: {
                query: query,
                fields: ['name^3', 'description'],
                fuzziness: 'AUTO'
              }
            }
          ],
          filter: []
        }
      }
    }
  };

  // 分类过滤
  if (category) {
    searchQuery.body.query.bool.filter.push({
      term: { category: category }
    });
  }

  // 价格范围
  if (minPrice || maxPrice) {
    const range = {};
    if (minPrice) range.gte = minPrice;
    if (maxPrice) range.lte = maxPrice;
    searchQuery.body.query.bool.filter.push({
      range: { price: range }
    });
  }

  // 排序
  if (sort) {
    searchQuery.body.sort = [
      { [sort.field]: sort.order }
    ];
  } else {
    // 默认按相关性排序
    searchQuery.body.sort = [
      { _score: { order: 'desc' } }
    ];
  }

  const result = await esClient.search(searchQuery);

  return {
    total: result.body.hits.total.value,
    page,
    limit,
    results: result.body.hits.hits.map(hit => hit._source)
  };
}

搜索建议（自动补全）：

async function getSearchSuggestions(query) {
  const result = await esClient.search({
    index: 'products',
    body: {
      suggest: {
        product_suggest: {
          prefix: query,
          completion: {
            field: 'name.suggest',
            size: 5
          }
        }
      }
    }
  });

  return result.body.suggest.product_suggest[0].options.map(opt => opt.text);
}

高亮显示：

async function searchWithHighlight(query) {
  const result = await esClient.search({
    index: 'products',
    body: {
      query: {
        multi_match: {
          query: query,
          fields: ['name', 'description']
        }
      },
      highlight: {
        fields: {
          name: {},
          description: {}
        },
        pre_tags: [''],
        post_tags: ['']
      }
    }
  });

  return result.body.hits.hits.map(hit => ({
    ...hit._source,
    highlight: hit.highlight
  }));
}

搜索界面设计

搜索框设计 ⭐⭐⭐⭐

HTML 结构：

CSS 样式：

.search-box {
  position: relative;
  width: 100%;
  max-width: 600px;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #007bff;
}

.search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}

.suggestion-item {
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.suggestion-item:hover {
  background: #f5f5f5;
}

.highlight {
  color: #007bff;
  font-weight: bold;
}

搜索结果页 ⭐⭐⭐⭐

页面布局：

搜索优化技巧

性能优化 ⭐⭐⭐⭐

优化方法：

1. 查询缓存
   - Redis 缓存热门搜索
   - 缓存时间 5-15 分钟

2. 索引优化
   - 合理设置分词器
   - 使用合适的字段类型
   - 定期优化索引

3. 查询优化
   - 限制返回数量
   - 使用过滤器代替查询
   - 避免深度分页

缓存实现：

const Redis = require('ioredis');
const redis = new Redis();

async function searchWithCache(query, options) {
  const cacheKey = `search:${query}:${JSON.stringify(options)}`;

  // 尝试从缓存获取
  const cached = await redis.get(cacheKey);
  if (cached) {
    return JSON.parse(cached);
  }

  // 执行搜索
  const results = await searchProducts(query, options);

  // 缓存结果（10 分钟）
  await redis.setex(cacheKey, 600, JSON.stringify(results));

  return results;
}

用户体验优化 ⭐⭐⭐⭐

优化点：

1. 搜索建议
   - 输入时显示建议
   - 历史记录
   - 热门搜索

2. 拼写纠错
   - 自动纠正拼写错误
   - "您是不是要找：XXX"

3. 无结果处理
   - 显示相关推荐
   - 提供搜索建议
   - 友好的提示

4. 搜索历史
   - 记录用户搜索
   - 快速访问历史
   - 可清除历史