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 相关文章推荐
iframe子父页面调用js函数示例
Nov 07 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
原生js的数组除重复简单实例
May 24 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
Javascript的this用法
Jan 16 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
vue实现记事本功能
Jun 26 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
详解在React里使用"Vuex"
2018/04/02 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python 实现UTC时间加减的方法
2018/12/31 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Python列表的切片实例讲解
2019/08/20 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
教师一岗双责责任书
2014/04/16 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
优秀研究生主要事迹
2014/06/03 职场文书