jQuery ajax模仿搜索框提示效果案例

最新推荐文章于 2021-08-05 16:13:39 发布

华惜

最新推荐文章于 2021-08-05 16:13:39 发布

阅读量406

点赞数

文章标签： jquery ajax

本文链接：https://blog.csdn.net/weixin_44966759/article/details/108483354

版权

案例

搜索框提示效果

一般说异步交互的时候,大多数想到的都是三级联动,三级联动虽然是很经典的案例。

一般我们使用的百度搜索也是异步交互，所以百度搜索框也是一个很经典的异步交互案例。

下面是一个用ajax和jQuery完成的一个百度搜索框案例效果图：

从效果图中可以看出

在不输入内容的情况下不显示
输入有内容显示内容
输入没有内容不显示内容

所以,根据思路可以确定

在刷新页面时清空列表内容
获取到每一次用户在输入到输入框的内容
根据获取到的内容利用方法getJSON获取到json库的数据
- 在获取json数据的时候获取到其中的name值
- 判断用户输入到输入框的内容以及获取到的数据在json数据中是否存在
- 存在就将json的数据返回添加带HTML页面中显示
- 不存在则不显示所有内容
在输入信息到获取信息到显示信息的时候,要保证提示框要从隐藏状态到显示状态

完整的json数据

[
    {
   
        "name": "javascript",
        "value": [
            "java",
            "javascript",
            "javascript权威指南",
            "javascript高级程序设计"
        ]
    },
    {
   
        "name":"jquery",
        "value":[
            "jquery", "jquery ajax","锋利的jquery"
        ]
    },
    {
   
        "name":"动漫",
        "value":[
            "秦时明月","武庚纪","你的名字","千与千寻","狐妖小红娘"
        ]
    }
]

完整的代码

<!DOCTYPE html>
<html lang="en"

最低0.47元/天解锁文章

华惜

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery ajax模仿搜索框提示效果案例

案例搜索框提示效果一般说异步交互的时候,大多数想到的都是三级联动,三级联动虽然是很经典的案例。一般我们使用的百度搜索也是异步交互，所以百度搜索框也是一个很经典的异步交互案例。下面是一个用ajax和jQuery完成的一个百度搜索框案例效果图：从效果图中可以看出在不输入内容的情况下不显示输入有内容显示内容输入没有内容不显示内容所以,根据思路可以确定在刷新页面时清空列表内容获取到每一次用户在输入到输入框的内容根据获取到的内容利用方法getJSON获取到json
复制链接

扫一扫