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如何给<textarea></textarea>赋值
Apr 20 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
jQuery实现日历效果
Sep 11 jQuery
使用Vant完成Dialog弹框案例
Nov 11 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
解析argc argv在php中的应用
2013/06/24 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
angularjs基础教程
2014/12/25 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Django异步任务线程池实现原理
2019/12/17 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python常用库大全及简要说明
2020/01/17 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
读书之星事迹材料
2014/05/12 职场文书
公路绿化方案
2014/05/12 职场文书
人事主管岗位职责
2015/02/04 职场文书
教师个人年终总结
2015/02/11 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript