要因為做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();
}
});
});