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实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
vue 限制input只能输入正数的操作
Aug 05 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
vue-router单页面路由
2017/06/17 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
Python decimal模块使用方法详解
2020/06/08 Python
幼儿师范毕业生自荐信
2013/11/09 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
投标承诺书怎么写
2014/05/24 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
搞笑老公保证书
2015/02/26 职场文书
营业员岗位职责范本
2015/04/14 职场文书
节约用电通知
2015/04/25 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
python process模块的使用简介
2021/05/14 Python
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android