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 字符编码规则
May 04 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
Jquery api 速查表分享
Jan 12 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
js验证账户名是否重复
May 26 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python3实现点餐系统
2019/01/24 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
毕业生动漫设计求职信
2013/10/11 职场文书
新领导上任欢迎词
2014/01/13 职场文书
《我的信念》教学反思
2014/02/15 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
企业贷款委托书格式
2014/09/12 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
回复函范文
2015/07/14 职场文书
清明扫墓感想
2015/08/11 职场文书
JS实现九宫格拼图游戏
2022/06/28 Javascript