JavaScript 百度搜索联想

<!DOCTYPE html>
<html>
<head>
  <style>
    .suggestions {
      max-height: 200px;
      overflow-y: auto;
    }

    .suggestion.selected {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <input type="text" id="searchInput" onkeyup="handleKeyUp(event)" />
  <div class="suggestions" id="suggestionsContainer"></div>

  <script>
    var searchInput = document.getElementById("searchInput");
    var suggestionsContainer = document.getElementById("suggestionsContainer");
    var selectedSuggestionIndex = -1;
    var matchedSuggestions = [];

    function handleKeyUp(event) {
      var searchText = searchInput.value.toLowerCase();

      // 清空原有的联想词
      suggestionsContainer.innerHTML = "";

      if (searchText.length > 0) {
        fetchSuggestions(searchText);
      } else {
        matchedSuggestions = [];
      }

      // 处理上下键选择联想词
      if (event.keyCode === 38) {
        // 上键
        event.preventDefault(); // 阻止光标跳动
        selectPreviousSuggestion();
      } else if (event.keyCode === 40) {
        // 下键
        event.preventDefault(); // 阻止光标跳动
        selectNextSuggestion();
      }
    }

    function fetchSuggestions(searchText) {
      var url = "https://www.baidu.com/sugrec?json=1&p=3&prod=pc&wd=" + searchText + "&cb=processSuggestions";
      var script = document.createElement("script");
      script.src = url;
      document.body.appendChild(script);
    }

    function processSuggestions(data) {
      matchedSuggestions = data.g;

      if (matchedSuggestions.length > 0) {
        populateSuggestions(matchedSuggestions);
      }
    }

    function populateSuggestions(matchedSuggestions) {
      matchedSuggestions.forEach(function(suggestion, index) {
        var suggestionDiv = document.createElement("div");
        suggestionDiv.innerText = suggestion.q;
        suggestionDiv.className = "suggestion";
        suggestionDiv.setAttribute("data-index", index);
        suggestionDiv.onclick = function() {
          selectSuggestion(index);
        };
        suggestionsContainer.appendChild(suggestionDiv);
      });
    }

    function selectSuggestion(index) {
      if (index >= 0 && index < matchedSuggestions.length) {
        searchInput.value = matchedSuggestions[index].q;
        suggestionsContainer.innerHTML = "";
        matchedSuggestions = [];
      }
    }

    function selectPreviousSuggestion() {
      var suggestionDivs = suggestionsContainer.getElementsByClassName("suggestion");
      if (selectedSuggestionIndex > 0) {
        suggestionDivs[selectedSuggestionIndex].classList.remove("selected");
        selectedSuggestionIndex--;
        suggestionDivs[selectedSuggestionIndex].classList.add("selected");
        searchInput.value = matchedSuggestions[selectedSuggestionIndex].q;
      }
    }

    function selectNextSuggestion() {
      var suggestionDivs = suggestionsContainer.getElementsByClassName("suggestion");
      if (selectedSuggestionIndex < suggestionDivs.length - 1) {
        if (selectedSuggestionIndex >= 0) {
          suggestionDivs[selectedSuggestionIndex].classList.remove("selected");
        }
        selectedSuggestionIndex++;
        suggestionDivs[selectedSuggestionIndex].classList.add("selected");
        searchInput.value = matchedSuggestions[selectedSuggestionIndex].q;
      }
    }
  </script>
</body>
</html>