软件工程日报--智慧搜索

智慧搜索

概要

我想实现一个智慧搜索的功能，大概是这样，我有一个输入框，和基本数据，然后我当我输入几个关键信息的时候，搜索框会给我推荐出相关信息。
类似一下这种

实现方法

首先我要一个数组来存储数据，可以是静态实现也可以是动态实现。这里直接使用静态数据，想使用动态也可用axios进行异步请求尝试一下
然后要知道涉及的一些操作，处理输入，显示推荐结果，高亮匹配文字，选中推荐项目以后操作，和点击外部关闭推荐栏

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>智能搜索推荐</title>
  <style>
    .search-container {
      position: relative;
      width: 500px;
      margin: 100px auto;
    }

    #searchInput {
      width: 100%;
      padding: 12px 20px;
      font-size: 16px;
      border: 2px solid #ddd;
      border-radius: 25px;
      outline: none;
      transition: border-color 0.3s;
    }

    #searchInput:focus {
      border-color: #4CAF50;
    }

    .suggestions-box {
      position: absolute;
      width: 100%;
      max-height: 300px;
      margin-top: 8px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      overflow-y: auto;
      display: none;
      z-index: 1000;
    }

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

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

    .highlight {
      color: #4CAF50;
      font-weight: bold;
    }
  </style>
</head>
<body>
<div class="search-container">
  <input type="text"
         id="searchInput"
         placeholder="输入关键词搜索..."
         autocomplete="off">
  <div class="suggestions-box" id="suggestionsBox"></div>
</div>

<script>
  // 模拟数据（可替换为真实API）
  const mockData = [
    "JavaScript教程",
    "Python编程入门",
    "Java基础教学",
    "CSS高级技巧",
    "React开发指南",
    "Vue3新特性解读",
    "Node.js实战项目",
    "Webpack配置指南"
  ];

  const searchInput = document.getElementById('searchInput');
  const suggestionsBox = document.getElementById('suggestionsBox');

  // 输入监听（带防抖）
  let timeout;
  searchInput.addEventListener('input', function(e) {
    clearTimeout(timeout);
    timeout = setTimeout(() => handleInput(e.target.value), 300);
  });

  // 处理输入
  function handleInput(value) {
    if (!value) {
      suggestionsBox.style.display = 'none';
      return;
    }

    const filtered = mockData.filter(item =>
            item.toLowerCase().includes(value.toLowerCase())
    );

    showSuggestions(filtered, value);
  }

  // 显示推荐结果
  function showSuggestions(results, query) {
    suggestionsBox.innerHTML = '';
    if (results.length === 0) {
      suggestionsBox.style.display = 'none';
      return;
    }

    results.forEach(text => {
      const div = document.createElement('div');
      div.className = 'suggestion-item';
      div.innerHTML = highlightMatch(text, query);
      div.addEventListener('click', () => selectSuggestion(text));
      suggestionsBox.appendChild(div);
    });

    suggestionsBox.style.display = 'block';
  }

  // 高亮匹配文字
  function highlightMatch(text, query) {
    const regex = new RegExp(`(${query})`, 'gi');
    return text.replace(regex, '<span class="highlight">$1</span>');
  }

  // 选中推荐项
  function selectSuggestion(text) {
    searchInput.value = text;
    suggestionsBox.style.display = 'none';
  }

  // 点击外部关闭推荐框
  document.addEventListener('click', (e) => {
    if (!e.target.closest('.search-container')) {
      suggestionsBox.style.display = 'none';
    }
  });
</script>
</body>
</html>
posted @ 2025-05-29 22:13  元始天尊123  阅读(11)  评论(0)    收藏  举报