Bootstrap5 实现多引擎搜索框，支持百度搜索联想

使用 Bootstrap5 和 JavaScript 创建多引擎搜索框，并实现百度搜索联想

想要创建一个美观且功能强大的搜索框，为用户提供多种搜索引擎选择和便捷的搜索联想功能？

以下代码将教你如何使用 Bootstrap5 和 JavaScript 实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多引擎搜索框</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <form id="search-form" class="d-flex">
      <input id="search-input" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <select id="search-engine" class="form-select me-2">
        <option value="google">Google</option>
        <option value="bing">Bing</option>
        <option value="yahoo">Yahoo</option>
        <option value="baidu">百度</option>
      </select>
      <button id="search-button" class="btn btn-primary" type="submit">搜索</button>
    </form>
    <ul id="suggestions" class="list-group mt-3"></ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const searchForm = document.getElementById('search-form');
    const searchInput = document.getElementById('search-input');
    const searchEngine = document.getElementById('search-engine');
    const suggestions = document.getElementById('suggestions');

    searchForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const query = searchInput.value;
      const engine = searchEngine.value;

      if (engine === 'baidu') {
        searchBaidu(query);
      } else {
        searchOtherEngines(query, engine);
      }
    });

    // 百度搜索联想功能
    function searchBaidu(query) {
      axios.get(`https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&from=pc_web&wd=${query}`)
        .then((response) => {
          const data = response.data;
          const suggestionsData = data.g;
          renderSuggestions(suggestionsData);
        })
        .catch((error) => {
          console.error('请求百度联想接口出错：', error);
        });
    }

    // 其他搜索引擎搜索逻辑
    function searchOtherEngines(query, engine) {
      // 根据选择的搜索引擎，构建搜索 URL 并跳转
      const searchUrls = {
        'google': `https://www.google.com/search?q=${query}`,
        'bing': `https://www.bing.com/search?q=${query}`,
        'yahoo': `https://search.yahoo.com/search?p=${query}`
      };
      window.location.href = searchUrls[engine];
    }

    // 渲染搜索联想列表
    function renderSuggestions(suggestionsData) {
      let html = '';
      if (suggestionsData && suggestionsData.length > 0) {
        suggestionsData.forEach((suggestion) => {
          html += `<li class="list-group-item">${suggestion.q}</li>`;
        });
      } else {
        html = '<li class="list-group-item">无搜索建议</li>';
      }
      suggestions.innerHTML = html;
    }
  </script>
</body>
</html>

这段代码实现了以下功能：

多引擎选择: 用户可以选择 Google、Bing、Yahoo 或百度进行搜索。
百度搜索联想: 当用户选择百度搜索并输入关键词时，会实时显示百度搜索联想词列表。
其他引擎搜索: 当用户选择其他搜索引擎并点击搜索按钮后，会跳转到对应搜索引擎的搜索结果页面。

代码解析:

使用 Bootstrap5 构建页面结构和样式，确保页面美观和响应式。
使用 Axios 库发送异步请求，获取百度搜索联想数据。
根据用户选择的搜索引擎，动态构建搜索 URL 并跳转到对应搜索引擎的搜索结果页面。
使用 JavaScript 监听用户输入和搜索引擎选择，实现搜索联想和多引擎搜索功能。

代码优势:

简洁易懂，方便开发者理解和修改。
使用 Bootstrap5 样式，页面美观大方。
使用 Axios 库，代码更简洁高效。
提供百度搜索联想功能，提升用户搜索体验。
支持自定义添加其他搜索引擎。

通过以上代码，你可以轻松地创建一个功能完善的搜索框，为用户提供便捷的搜索体验，并提升网站的易用性。