JS仿百度搜索自动提示框匹配查询功能.docVIP

JS仿百度搜索自动提示框匹配查询功能 添加动态加载css文件 不需要引入css css全部在JS动态生成。 2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 inputElem 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置)，因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class hiddenCls 当然也支持自己配置参数。 如下代码： div class=parentCls div style=width:200px;height:26px;border:1px solid #ccc; input type=text class=inputElem style=width:200px;height:26px;line-height:26px;/ /div input type=hidden class=hiddenCls/ /div div class=parentCls div style=width:200px;height:26px;border:1px solid #ccc; input type=text class=inputElem style=width:200px;height:26px;line-height:26px;/ /div input type=hidden class=hiddenCls/ /div 3. 支持页面上有多个输入框。 4. 支持鼠标点击和 键盘 上移和下移键操作 类似于百度输入框。 页面上所有的标签都是动态的生成的，不需要额外的标签。如上面的 只需要input标签 其他的div标签不依赖 只需要父级元素增加class parentCls（当然可以自己配置类名）， 及要传给后台开发人员的隐藏域输入框 增加一个class hiddenCls 当然也可以自动配置参数。 我的模糊查询匹配的需求是这样的： 1. 每keyup时候 点击或者键盘上移下移操作 输入框填充用户名/工号 隐藏域填充工号 发请求 服务器返回数据 渲染出来。当然 隐藏域填充工号 值是form表单提交时候 后台要拿到提交过来的工号 所以需要这么一个隐藏域。 2. 当用户直接在输入框输入值时候 并没有键盘上移下移 或者 点击下拉框某一项时候 当鼠标失去焦点时候(blur) 当前输入框值为空 隐藏域值为空，这样做的目的 是为了防止上次form提交过后的数据仍然保存在隐藏域里面 当用户重新输入的时候 用户也并没有操作键盘上下移操作或者点击操作 再点击提交按钮时(失去焦点)，那么值为空 隐藏域值为空 这样防止搜索出来不是用户输入的那个东东。 3. 当用户点击某一项时候 或者 上移下移时候 输入框动态的生成值 且输入框值现在不能重新输入 只有当点击输入框x的时候 才可以重新输入。 4. 已经遗留输入框可以多选的接口 目前还未完善输入框多选的操作。 5. 禁止ctrl+v 或者右键 粘贴操作。 下面HTML代码如下： div class=parentCls div style=width:200px;height:26px;border:1px solid #ccc; input type=text class=inputElem style=width:200px;height:26px;line-height:26px;/ /div input type=hidden class=hiddenCls/ /div div class=parentCls div style=width:200px;height:26px;border:1px solid #ccc; input type=text class=inputElem style=width:200px;height:26px;line-height:26px;/ /div input type=hidden class=hiddenCls/ /div input type=button value=提交/ JS代码如下： /** * JS 模糊查询 * @author tugenhua * @date 2013-11-19 * @param 1.当前的input ad