搜索提示框

WILLIAMer

我本來已經寫好了這個功能
但不是透過plugin的方式
有個地方做的不好想來請教一下

我的提示下拉框是用div組成的
即每個符合的字眼都是一個個獨立的div
ex:出現六個符合的字眼的話,那六個都是一行一行的div
出現提示框後一樣可以按上下鍵移動到那些的字上

而我移動的方式
是透過focus到div上
來做這個移動的效果
不過我發現很多網站在上下移動到字眼的過程
focus的光標還是會停留在textfield上

我試過把focus留在textfield上
但似乎無法同時讓下拉的div也有focus的狀態
這樣便無法上下的移動了

是我控制移動的方式有缺點嗎?
還是大部分都不是這樣做的

WILLIAMer

剛花了一點時間修改一下
順利的避免掉這個問題

還好一開始推測focus到textfield的想法也沒有錯

感謝wmh大的幫忙啦!

WILLIAMer

我有空再來試著把focus放在textfield來做做看!
目前大概有想到怎麼做了

其實會有這個困擾的主因
是因為當頁面高度過長有scroll bar的時候
按下鍵移到選項時 scroll bar也會跟著動一下
所以我才在想是不是把focus放到textfield可以避免這種情形

不過假日上youtube看影片時
發現youtube雖然光標是停留在textfield上
也會有我說哪種情形
按下鍵也會控制到scroll bar
但yahoo的就不會

總之我還是先試試吧!

[ 本帖最後由 WILLIAMer 於 2009-7-20 11:04 編輯 ]

wmh

同時只能有一個 element focus，所以正確的作法應該是 focus 在 textfield 上，
接收上下鍵也是在 textfield，然後再處理顯示選取的 UI

類似的實做很多，可以藉由參考其他人寫好的 code 來學習，可以事半功倍喔

WILLIAMer

部份的code

提示框的部份

<div id="sug'+i+'"'+' onmouseover="javascript:suggestOver(this);"        
                                'onmouseout="javascript:suggestOut(this);" 
                                'onclick="javascript:setSearch(this.innerHTML);" 
                                'onkeyup="javascript:keyHandler(this,event);" 
                                'class="suggest_link">' + str[i ] + '</div>

控制移動的code

function keyHandler(obj,eve){
                var key = window.event ? eve.keyCode : eve.which;
                var DivText = document.getElementById("Keyword");
                if(key == 13){
                        ...
                }else if(key == 38){
                        if(obj.previousSibling!=null){                
                                DivText.focus();        
                                obj.blur();
                                obj.onmouseout();        
                                obj.previousSibling.focus();
                                obj.previousSibling.onmouseover();
                        }else{        
                                DivText.focus();
                                obj.blur();
                                obj.onmouseout();                
                        }
                }else if(key == 40){
                        if(obj.nextSibling!=null){        
                                DivText.focus();
                                obj.blur();
                                obj.onmouseout();
                                obj.nextSibling.focus();
                                obj.nextSibling.onmouseover();                        
                        }else{
                                DivText.focus();
                                obj.blur();
                                obj.onmouseout();
                        }        
                }
        }

每個div內都有個onkeyup事件
所以我必須將foucs放到div上
再來就是如果在focus上的div按上下鍵後的處理

code上我有將textfield focus
不過後面div也focus的話會蓋掉
如果先focus div再focus textfield
則一樣前面的會沒focus的效果了

其他網站是如何達到這種上下移動
卻不會讓textfield內的光標消失