jquery.autocomplete修改实现键盘上下键自动填充示例_jquery

根据需求要实现通过键盘上下移动,获得联想菜单中的值,如同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);
},

时间: 2024-10-04 18:19:25

jquery.autocomplete修改实现键盘上下键自动填充示例_jquery的相关文章

Jquery实现图片左右自动滚动示例_jquery

复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>基于jQuery的控制左右滚动效果_自动滚动版本</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <style> body{font-size:0.8em;l

jQuery实现Div拖动+键盘控制综合效果的方法_jquery

本文实例讲述了jQuery实现Div拖动+键盘控制综合效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

jquery实现炫酷的叠加层自动切换特效_jquery

下面是HTML代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jquery叠加页片自动切换特效 - 柯乐义</title><base target="_blank" /> <lin

jquery实现按Enter键触发事件示例_jquery

复制代码 代码如下: $(function () { document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arguments[0]; if (e && e.keyCode == 13) { //to do something; } }; });

jquery+css3问卷答题卡翻页动画效果示例_jquery

CSS3+jQuery制作立体翻页时间展示动画特效.该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用. 这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib

jquery选择符快速提取web表单数据示例_jquery

本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法. 以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法. 我给需要提交数据每个表单域添加了一个额外的属性,用自己额外定义的属性"_postField"代替原来的name

jQuery实现类似淘宝购物车全选状态示例_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

jQuery使用each方法与for语句遍历数组示例_jquery

本文实例讲述了jQuery使用each方法与for语句遍历数组.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jQuery简单自定义图片轮播插件及用法示例_jquery

本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh