[Ajax] jQuery中的Ajax -- 03-搜索框提示效果
案例 搜索框提示效果
平常说异步交互的时候,大多数想到的是三级联动,但是根据百度搜索框的样式发现,搜索框提示也是异步交互
从效果中可以看出
- 在不输入内容的情况下不显示
- 输入有内容显示内容
- 输入没有内容不显示内容
所以,根据思路可以确定
- 在刷新页面时清空列表内容
- 获取到每一次用户在输入到输入框的内容
- 根据获取到的内容利用方法
getJSON获取到json库的数据- 在获取json数据的时候获取到其中的name值
- 判断用户输入到输入框的内容以及获取到的数据在json数据中是否存在
- 存在就将json的数据返回添加带HTML页面中显示
- 不存在则不显示所有内容
- 在输入信息到获取信息到显示信息的时候,要保证提示框要从隐藏状态到显示状态