首页 前端知识 通过jQuery实现淘宝搜索提示功能

通过jQuery实现淘宝搜索提示功能

2024-04-30 11:04:12 前端知识 前端哥 73 419 我要收藏

一、先来展示下功能:

淘宝搜索提示功能

二、实现:

        1、大体实现思路: 先从input框里获得输入的内容,再把得到的内容通过jQuery封装的ajax以jsonp的形式发送出去。接着把响应回来的数据渲染到页面上

        2、其他内容:

                1)、在input里通过定时器做了输入防抖

// 给input设个防抖 (定时器)
let timer = null
function settime(k) {
timer = setTimeout(function () {
// 判断此时的k对应的属性值在对象objsend里是否已存在
if (objsend[k]) return xuanran(objsend[k])
send(k)
}, 500)
}
复制

                2)、通过对象来存储ajax请求回来的数据,避免多次重复发送请求

                3)、鼠标点击input框外,提示内容隐藏,点击里面则显示

// 点击外面隐藏提示框
$(document).on('click' , function (e) {
复制
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6708.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!