[Ajax] jQuery中的Ajax -- 03-搜索框提示效果

案例 搜索框提示效果

平常说异步交互的时候,大多数想到的是三级联动,但是根据百度搜索框的样式发现,搜索框提示也是异步交互

代码下载地址

GIF 2020 9 5 14 44 25

从效果中可以看出

  1. 在不输入内容的情况下不显示
  2. 输入有内容显示内容
  3. 输入没有内容不显示内容

所以,根据思路可以确定

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值