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

2019/6/29 22:41:03

编程Tag： autocomplete 自动填充上下键

本文主要是介绍jquery.autocomplete修改实现键盘上下键自动填充示例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

这篇关于jquery.autocomplete修改实现键盘上下键自动填充示例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章