js文本框输入内容智能提示效果

前端之家收集整理的这篇文章主要介绍了js文本框输入内容智能提示效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了js文本框输入内容智能提示效果代码分享给大家供大家参考。具体如下: 运行效果截图如下:

大体思路:

1.监听文本框事件。这里是用的keyup事件。大家可以尝试用onchange事件。不过感觉keyup事件的效果要好一点。

2.根据输入内容通过ajax异步的方式去访问后台数据。

3.遍历返回数据将数据添加显示区域。

4.在添加数据的同时给每一条数据加上一些效果,点击其中一条将数据填到文本框,并且提示内容消失。

5.后台数据应该拼接成json格式。

具体代码如下:

自动提示