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 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
SVG描边动画
Feb 23 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
jquery实现下载图片功能
Jul 18 jQuery
node.js 微信开发之定时获取access_token
Feb 07 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
JavaScript十大取整方法实例教程
Dec 03 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+MySQL 制作简单的留言本
2009/11/02 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
PHP解决中文乱码
2017/04/28 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
告诉大家什么是JSON
2008/06/10 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
javascript中的面向对象
2017/03/30 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
python实现自动重启本程序的方法
2015/07/09 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
python数组过滤实现方法
2015/07/27 Python
python实现文本界面网络聊天室
2018/12/12 Python
python处理“
2019/06/10 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
python清空命令行方式
2020/01/13 Python
Python sep参数使用方法详解
2020/02/12 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
python 实现控制鼠标键盘
2020/11/27 Python
python中remove函数的踩坑记录
2021/01/04 Python
关于母亲节的感言
2014/02/04 职场文书
综艺节目策划方案
2014/06/13 职场文书
如何写辞职信
2015/05/13 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python