jquery.autocomplete修改实现键盘上下键自动填充示例


Posted in Javascript onNovember 19, 2013

根据需求要实现通过键盘上下移动,获得联想菜单中的值,如同google baidu的查询功能。
在网上找了很久没有找到可以实现该功能的插件,无奈只能自己动手改代码。
找到js中的KEY.DOWN 和 KEY.UP执行代码
如下:

case KEY.DOWN: 
event.preventDefault(); 
if ( select.visible() ) { 
select.next(); 
} 
else { 
onChange(0, true); 
} 
break;

在select.next();后加入
var selected = select.selected(); 
var v = selected.result; 
$input.val(v);

这样加好后,上下键时输入框里会有相应的值,但是联想键盘上的光标却不见了。
找到select.next(); 代码的定义
next: function() { 
moveSelect(1); 
},

加入一个类似的方法
stay: function() { 
moveSelect(1); 
},

然后
case KEY.DOWN: 
event.preventDefault(); 
if ( select.visible() ) { 
select.next(); 
var selected = select.selected(); 
var v = selected.result; 
$input.val(v); 
select.stay(); 
} 
else { 
onChange(0, true); 
} 
break;

这样就可以了。

================================

非常感谢原作者,

加入一个类似的方法

stay: function() { 
moveSelect(1); 
},后发现点击上下键,是隔行移动,所以改为: stay: function() { 
moveSelect(0); 
},
Javascript 相关文章推荐
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
详解React 元素渲染
Jul 07 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 #Javascript
js计算两个时间之间天数差的实例代码
Nov 19 #Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 #Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 #Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 #Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 #Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 #Javascript
You might like
正则表达式语法
2006/10/09 Javascript
杏林同学录(四)
2006/10/09 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
JS 判断代码全收集
2009/04/28 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
js实现拖动缓动效果
2020/01/13 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
深入理解Python中的内置常量
2017/05/20 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
OpenCV 边缘检测
2019/07/10 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
导致python中import错误的原因是什么
2020/07/01 Python
Python无损压缩图片的示例代码
2020/08/06 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Python实现自动整理文件的脚本
2020/12/17 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
大学生应聘自荐信
2013/10/11 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
预防传染病方案
2014/06/14 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
人事代理委托书
2014/09/27 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
四大名著读书笔记
2015/06/25 职场文书
大队委员竞选稿
2015/11/20 职场文书