下拉菜单

2023-08-25T14:14:42.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>搜索功能网页</title>
</head>
<body>
  <h1>搜索功能网页</h1>
  
  <form id="searchForm" method="get">
    <input type="text" id="searchInput" name="q" placeholder="请输入搜索内容" autofocus>
    <select id="searchEngine" name="engine">
      <option value="google">Google</option>
      <option value="bing">Bing</option>
      <option value="baidu">百度</option>
      <option value="sogou">搜狗</option>
    </select>
    <button type="submit">搜索</button>
  </form>
  
  <script>
    // 获取搜索引擎选择框并设置初始值
    var searchEngineSelect = document.getElementById("searchEngine");
    var selectedEngine = localStorage.getItem("selectedEngine");
    if (selectedEngine) {
      searchEngineSelect.value = selectedEngine;
    }
    
    // 监听搜索表单的提交事件
    document.getElementById("searchForm").addEventListener("submit", function(e) {
      e.preventDefault();  // 阻止表单默认的提交行为
      
      // 获取搜索框和选中的搜索引擎值
      var searchQuery = document.getElementById("searchInput").value;
      var selectedEngine = searchEngineSelect.value;
      
      // 保存选中的搜索引擎到本地存储
      localStorage.setItem("selectedEngine", selectedEngine);
      
      // 根据选中的搜索引擎值进行搜索
      switch (selectedEngine) {
        case "google":
          window.location.href = "https://www.google.com/search?q=" + encodeURIComponent(searchQuery);
          break;
        case "bing":
          window.location.href = "https://www.bing.com/search?q=" + encodeURIComponent(searchQuery);
          break;
        case "baidu":
          window.location.href = "https://www.baidu.com/s?wd=" + encodeURIComponent(searchQuery);
          break;
        case "sogou":
          window.location.href = "https://www.sogou.com/web?query=" + encodeURIComponent(searchQuery);
          break;
        default:
          break;
      }
    });
  </script>
</body>
</html>

单选菜单

2023-08-25T14:39:24.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜索功能网页</title>
</head>
<body>
    <label>选择搜索引擎：</label>
    <input type="radio" name="searchEngine" value="https://www.google.com" checked> Google
    <input type="radio" name="searchEngine" value="https://www.baidu.com"> 百度
    <input type="radio" name="searchEngine" value="https://www.bing.com"> Bing

    <br><br>

    <input type="text" id="searchText" onkeydown="search(event)">
    <button onclick="performSearch()">搜索</button>

    <script>
        // 获取搜索引擎选择框元素
        var searchEngineRadios = document.getElementsByName("searchEngine");

        // 刷新页面时，检查之前是否有保存的搜索引擎选择
        if (localStorage.getItem("selectedSearchEngine")) {
            var selectedSearchEngine = localStorage.getItem("selectedSearchEngine");

            // 根据保存的搜索引擎选择，选中相应的单选按钮
            for (var i = 0; i < searchEngineRadios.length; i++) {
                if (searchEngineRadios[i].value === selectedSearchEngine) {
                    searchEngineRadios[i].checked = true;
                    break;
                }
            }
        }

        // 保存搜索引擎选择到本地存储
        function saveSearchEngine() {
            var selectedSearchEngine = null;

            // 查找选中的单选按钮
            for (var i = 0; i < searchEngineRadios.length; i++) {
                if (searchEngineRadios[i].checked) {
                    selectedSearchEngine = searchEngineRadios[i].value;
                    break;
                }
            }

            if (selectedSearchEngine) {
                localStorage.setItem("selectedSearchEngine", selectedSearchEngine);
            }
        }

        // 执行搜索
        function performSearch() {
            var searchText = document.getElementById("searchText").value;
            var selectedSearchEngine = null;

            // 查找选中的单选按钮
            for (var i = 0; i < searchEngineRadios.length; i++) {
                if (searchEngineRadios[i].checked) {
                    selectedSearchEngine = searchEngineRadios[i].value;
                    break;
                }
            }

            if (selectedSearchEngine) {
                // 根据选择的搜索引擎和搜索内容进行搜索
                var searchUrl = selectedSearchEngine + "/search?q=" + encodeURIComponent(searchText);
                window.location.href = searchUrl;
            }
        }

        // 监听回车键事件，按下回车键时执行搜索
        function search(event) {
            if (event.key === "Enter") {
                performSearch();
            }
        }
    </script>
</body>
</html>