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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
js实现时间日期校验
May 26 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
React列表栏及购物车组件使用详解
Jun 28 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
Python httplib,smtplib使用方法
2008/09/06 Python
python3.5安装python3-tk详解
2019/04/26 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python实现爬取并分析电商评论
2020/06/19 Python
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
新郎婚宴答谢词
2014/01/19 职场文书
六查六看心得体会
2014/10/14 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
Java spring定时任务详解
2021/10/05 Java/Android
分享3个非常实用的 Python 模块
2022/03/03 Python