因為做autocomplete而得到的心得

要因為做autocomplete得到幾個心得:

1.要放結果的框框直接放到輸入框的下方,position屬性設成absolute,而且不設left及top,結果框就會乖乖待在原地不動。省得用javascript抓到不相容的位置。

2.結果框的項目用<a>來包裝,然後設好觸發這些<a>的focus及blur事件要做的事情,基本上就是改<a>的文字、背景顏色。之後先把這些<a>抓到陣列裡,然後在document的keyup事件裡判斷是上行還是下行後取得適當的陣列索引,再將這個索引套用到前述陣列提出<a>物件來觸發focus事件。這樣用鍵盤上下鍵就可以在<a>裡遊移了。原始碼如下:

$(document).ready(function(){

$(“a”).focus(function(){

$(this).addClass(“activelink”);

});

$(“a”).blur(function(){

$(this).removeClass(“activelink”);

});

var links=$(“a”).get();

var cur_p=0;

var p_first=1;

var p_last=links.length;

$(document).keyup(function(e){

var c=e.which || e.keyCode;

if(c==38){

if(cur_p==0 || cur_p==1){

cur_p=p_last;

}else{

cur_p=cur_p-1;

}

links[cur_p-1].focus();

}else if(c==40){

if(cur_p==0 || cur_p==p_last){

cur_p=p_first;

}else{

cur_p=cur_p+1;

}

links[cur_p-1].focus();

}

});

});

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Proudly using Dynamic Headers by Nicasio WordPress Design