.NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路

2023年6月11日上午7:42 • JavaScript

下面是详细的“.NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路”的攻略：

思路概述

将百度搜索框封装入input标签内，并加上id="searchInput"属性，这样方便后续的DOM操作。
使用JavaScript监听输入框内容（keyup事件），当用户输入触发事件后，发送AJAX请求给百度服务器，获取搜索结果。
接收到结果后，将结果显示到页面上的下拉提示框中。下拉提示框使用CSS设置定位和样式。
当用户点击搜索关键词或在下拉提示框上按上下键时，将关键词填入输入框并提交搜索表单。

代码实现

HTML结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度搜索</title>
    <style>
        .result-panel {
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            max-height: 200px;
            overflow-y: auto;
            z-index: 999;
            width: 350px;
        }

        .result-item {
            padding: 5px 10px;
            cursor: pointer;
        }

        .result-item:hover {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <form action='http://www.baidu.com/s' target="_blank" method="get">
        <input type="text" name="wd" id="searchInput" autocomplete="off" />
        <input type="submit" value="搜索" />
    </form>
    <div id="searchResult"></div>
    <script src="js/search.js"></script>
</body>
</html>

JavaScript代码

// 获取文档中的input和div元素
const input = document.getElementById('searchInput')
const resultPanel = document.getElementById('searchResult')

// 监听input输入事件
input.addEventListener('keyup', () => {
  // 延迟一段时间再去搜索，避免频繁搜索
  setTimeout(() => {
    const keyword = input.value.trim()
    if (keyword === '') {
      // 如果输入框没有内容，则隐藏下拉提示框
      resultPanel.innerHTML = ''
      resultPanel.style.display = 'none'
      return
    }
    // 发送AJAX请求给百度服务器，获取搜索结果
    const xhr = new XMLHttpRequest()
    xhr.open('GET', 'https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=' + keyword)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        try {
          if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText)
            const results = response.g
            if (results.length === 0) {
              resultPanel.innerHTML = ''
              resultPanel.style.display = 'none'
              return
            }
            // 构建下拉提示框中的搜索结果
            let html = ''
            results.forEach(item => {
              html += `<div class="result-item" data-title="${item.q}">${item.q}</div>`
            })
            // 在页面中显示下拉提示框，并将搜索结果填充进去
            resultPanel.innerHTML = html
            resultPanel.style.display = 'block'
          }
        } catch (error) {
          // JSON解析失败或发生其它错误
          resultPanel.innerHTML = ''
          resultPanel.style.display = 'none'
        }
      }
    }
    xhr.send()
  }, 300)
})

// 监听下拉提示框中的鼠标单击事件
resultPanel.addEventListener('click', event => {
  const target = event.target
  if (target.classList.contains('result-item')) {
    // 将单击的搜索关键词填入HTML input元素中
    input.value = target.dataset.title
    resultPanel.innerHTML = ''
    resultPanel.style.display = 'none'
    // 提交搜索表单
    input.form.submit()
  }
})

// 监听下拉提示框中的键盘上下键事件
resultPanel.addEventListener('keydown', event => {
  const target = event.target
  if (target.classList.contains('result-item')) {
    if (event.key === 'ArrowDown') {
      const next = target.nextElementSibling
      if (next) {
        next.focus() // 焦点移动到下一个
      }
    } else if (event.key === 'ArrowUp') {
      const prev = target.previousElementSibling
      if (prev) {
        prev.focus() // 焦点移动到上一个
      }
    }
  }
})

以上代码实现了一个简单的百度搜索下拉提示功能，输入框会通过AJAX请求获取搜索建议，展示在下拉面板中。在展示面板中的建议上按下Enter键直接提交查询表单，按下键盘上下键从展示面板中的建议中以此类推选择要搜索的内容。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：.NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路 - Python技术站