类似百度、google的模糊查询下拉列表显示制作

本文介绍了如何使用JavaScript实现类似百度、Google的模糊查询下拉列表功能。通过在页面加载时获取项目名称并存储,然后在输入框onkeydown事件中进行模糊搜索,将匹配项动态显示在列表中。
摘要由CSDN通过智能技术生成

          前几天练习js,做了个类似百度和google的简单模糊查询下拉列表显示效果。

任务:

           制作一个模糊查询的下拉列表显示的效果,可以对项目名称进行模糊查询。

       我的基本思路:首先在加载页面时初始化,将数据库中的所有项目名称通过ajax传输到客户端存放到一个全局的数组里,然后在标签<input type="text">中的onkeydown事件触发的函数中对input中输入的文字在全局数组中进行搜索,将搜索到的项目名称保存到另一个数组中,再将其动态绘制到列表li中进行显示。


下面看代码:

首先是输入框的制作,既可以有下拉列表select的功能又有输入功能。

 <span style="position: relati
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值