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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
js动态切换图片的方法
Jan 20 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 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
人族 TERRAN 概述
2020/03/14 星际争霸
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python如何给函数库增加日志功能
2020/08/04 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
怎么写有吸引力的自荐信
2013/11/17 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
户外活动总结范文
2014/04/30 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2014年保洁工作总结
2014/11/24 职场文书
单位未婚证明范本
2014/11/25 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
中班下学期个人总结
2015/02/12 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记