Input框的智能提示下拉层功能

下面我们来实现如图所示的功能。


第一步:首先我们先在html文件中简单的布个局如下图:



在input框下面还需要建立一个下拉框的布局,将下拉框隐藏掉


实现的静态效果是如下图所示:



这样已经初步有了一点效果,但这只是静态的,下面我们来实现静态的效果,实现这个效果我们需要了解js,jQ的用法。
 我们先建一个数据库,里面存放着我们的数据
1、首先我们要引入jQ代码库<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>之后我们就可以利用jQ框架来实现效果
2、我们要对input框绑定一个键盘按下keyup事件




3、将获取的到的关键字发送到后台控制器中
在后台进行模糊查询


后台处理之后在前台进行下图步骤处理





最终就可以的到本文章最初的效果。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zyj_15067066062/article/details/53097642
个人分类: Javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭