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

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

思路概述

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

代码实现

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技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript Window 打开新窗口(window.location.href、window.open、window.showModalDialog)

    JavaScript Window 打开新窗口 有3种常用的JavaScript方法可以打开一个新窗口,它们分别是window.location.href、window.open和window.showModalDialog。接下来,我们将详细讲解它们的使用方法和区别。 window.location.href window.location.href 可以…

    JavaScript 2023年6月11日
    00
  • Javascript Math pow() 方法

    JavaScript中的Math.pow()方法是用于计算一个数的指定次幂的函数。以下是关于Math.pow()方法的完整攻略,包含两个示例。 JavaScript Math对象的pow方法 JavaScript Math的pow()方法用于计算一个数的指定次幂。下面是pow()方法的语法: Math.pow(base, exponent) 其中,base表…

    JavaScript 2023年5月11日
    00
  • 纯js实现的积木(div层)拖动功能示例

    下面是详细的攻略: 1. 概述 本攻略将详细讲解如何实现“纯js实现的积木(div层)拖动功能示例”。实现过程包括以下几个步骤: 设置div元素的拖动属性; 监听鼠标事件; 计算鼠标相对于被拖动元素的偏移量; 根据鼠标移动的位置,对被拖动元素进行实时更新位置; 实现停止拖拽功能。 2. 操作步骤 步骤一:设置div元素的拖动属性 在HTML代码中,我们需要将…

    JavaScript 2023年5月28日
    00
  • JavaScript Split()方法

    JavaScript的split()方法用于将字符串分割成字符串数组,返回数组。它可以按照指定的分割符来分割字符串。以下是详细讲解split()方法的攻略: 语法 string.split(separator, limit) 参数:- separator(必须):用于指定分割符的字符串或正则表达式。- limit(可选):一个整数,限定分割后的数组长度。 基…

    JavaScript 2023年5月18日
    00
  • JS开发常用工具函数(小结)

    JS开发常用工具函数(小结)攻略 为什么需要工具函数? 在JavaScript开发中,我们经常需要针对某一些操作、方法,编写一些公共函数,以便在需要的时候能够直接调用。而这些工具函数,会在项目中使用到很多地方,提高了代码可读性和代码复用性。 JS开发常用工具函数 下面是一些JS开发常用的工具函数,包括: 1. 判断是否为对象 有时候需要判断一个变量是不是对象…

    JavaScript 2023年5月27日
    00
  • JS的Form表单转JSON格式的操作代码

    JS的Form表单转JSON格式的操作代码可以通过以下步骤实现: 获取表单元素 使用document.querySelector()方法获取到表单元素对象。例如: const form = document.querySelector(‘#myForm’); 遍历表单元素 使用forEach()方法遍历表单元素的所有表单控件,并将其转换为JSON格式。例如:…

    JavaScript 2023年5月27日
    00
  • JS实现判断数组是否包含某个元素示例

    下面我将详细讲解如何实现判断数组是否包含某个元素。 1. 使用includes()方法判断数组是否包含某个元素 includes() 方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false。下面是使用 includes() 方法判断数组是否包含某个元素的示例代码: const arr = [1, 2, 3, 4, 5]; c…

    JavaScript 2023年5月27日
    00
  • JS FormData对象使用方法实例详解

    JS FormData对象使用方法实例详解 什么是FormData对象 FormData对象是JavaScript提供的一种数据处理对象,主要用来实现表单数据的序列化操作、数据的自动编码以及数据传输等功能。 FormData对象常用方法 FormData对象常用的方法有以下几种: append(name, value[, filename]): 在一个for…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部