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 相关文章推荐
javascript Prototype 对象扩展
May 15 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
微信小程序实现底部导航
Nov 05 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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
php教程之phpize使用方法
2014/02/12 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
php实现文件编码批量转换
2014/03/10 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
python复制文件的方法实例详解
2015/05/22 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
python对象与json相互转换的方法
2019/05/07 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
工商技校毕业生自荐信
2013/11/15 职场文书
审计主管岗位职责
2014/01/31 职场文书
优秀企业获奖感言
2014/02/01 职场文书
安全检查管理制度
2014/02/02 职场文书