DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery.autocomplete修改實現鍵盤上下鍵自動填充示例
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);
},
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved