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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
JS ES6异步解决方案
Apr 29 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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 求质素(素数) 的实现代码
2011/04/12 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php生成静态页面的简单示例
2014/04/17 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
JavaScript 的继承
2011/10/01 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python单元测试简单示例
2018/07/03 Python
python构建基础的爬虫教学
2018/12/23 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
python中time、datetime模块的使用
2020/12/14 Python
python Scrapy框架原理解析
2021/01/04 Python
英语专业应届生求职信范文
2013/11/15 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
庆祝儿童节标语
2014/10/09 职场文书
班级班风口号大全
2015/12/25 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis