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 数组实现一个类似ruby的迭代器
Oct 27 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python主要用于哪些方向
2020/07/05 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
五好党支部事迹材料
2014/02/06 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
法院授权委托书范文
2014/08/02 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
工作失误检讨书
2015/01/26 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android