jquery.autocomplete修改實現(xiàn)鍵盤上下鍵自動填充示例
更新時間:2013年11月19日 17:10:29 作者:
根據(jù)需求要實現(xiàn)通過鍵盤上下移動,獲得聯(lián)想菜單中的值,如同google baidu的查詢功能,下面的代碼是自己手寫的,喜歡的朋友可以嘗試操作下
根據(jù)需求要實現(xiàn)通過鍵盤上下移動,獲得聯(lián)想菜單中的值,如同google baidu的查詢功能。
在網(wǎng)上找了很久沒有找到可以實現(xiàn)該功能的插件,無奈只能自己動手改代碼。
找到js中的KEY.DOWN 和 KEY.UP執(zhí)行代碼
如下:
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);
這樣加好后,上下鍵時輸入框里會有相應的值,但是聯(lián)想鍵盤上的光標卻不見了。
找到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);
},后發(fā)現(xiàn)點擊上下鍵,是隔行移動,所以改為:
stay: function() {
moveSelect(0);
},
在網(wǎng)上找了很久沒有找到可以實現(xiàn)該功能的插件,無奈只能自己動手改代碼。
找到js中的KEY.DOWN 和 KEY.UP執(zhí)行代碼
如下:
復制代碼 代碼如下:
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);
這樣加好后,上下鍵時輸入框里會有相應的值,但是聯(lián)想鍵盤上的光標卻不見了。
找到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);
},后發(fā)現(xiàn)點擊上下鍵,是隔行移動,所以改為:
stay: function() {
moveSelect(0);
},
相關文章
jquery實現(xiàn)滑屏大圖定時收縮為小banner圖片的廣告代碼
這篇文章主要介紹了jquery實現(xiàn)滑屏大圖定時收縮為小banner圖片的廣告代碼,可實現(xiàn)大幅廣告圖的漸顯效果及定時收縮功能,點擊左上角關閉按鈕還可隱藏廣告圖片,非常具有實用價值,需要的朋友可以參考下2015-09-09jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼
有時候我們需要讀取JSON格式的數(shù)據(jù)文件,在jQuery中可以使用Ajax或者 $.getJSON()方法實現(xiàn),下面有個不錯的示例,需要的朋友可以參考下2013-11-11jquery調(diào)取json數(shù)據(jù)實現(xiàn)省市級聯(lián)的方法
這篇文章主要介紹了jquery調(diào)取json數(shù)據(jù)實現(xiàn)省市級聯(lián)的方法,可實現(xiàn)讀取json數(shù)據(jù)綁定到下拉菜單的功能,非常具有實用價值,需要的朋友可以參考下2015-01-01js jquery分別實現(xiàn)動態(tài)的文件上傳操作按鈕的添加和刪除
本文為大家介紹下使用js及jquery實現(xiàn)動態(tài)的文件上傳操作按鈕的添加和刪除,具體示例如下,希望對大家有所幫助2014-01-01使用jquery.qrcode.min.js實現(xiàn)中文轉化二維碼
本文給大家介紹的是一款jQuery的插件jquery.qrcode.min.js,其主要功能是可以生成二維碼,而且可以完美支持中文,下面就給小伙伴們介紹下他的用法2016-03-03jQuery插件Elastislide實現(xiàn)響應式的焦點圖無縫滾動切換特效
這篇文章主要介紹了jQuery插件Elastislide實現(xiàn)響應式的焦點圖無縫滾動切換特效,效果非常的棒,而且兼容性也很好,推薦給小伙伴們2015-04-04