羅必達工作室

這個功能在Google Suggest引發了一陣研究熱潮, 但是在我想要拿來實際應用時, 不如想像中簡單及符合需求

使用Jquery+Autocomplete可以找到以下二個網址提供相關的功能
http://www.dyve.net/jquery/?autocomplete
http://www.pengoworks.com/workshop/jquery/autocomplete.htm

還有找到以下網址, 但是寫的太複雜了, 自己也改不動, 所以不考慮使用, 但是它的功能都是我想要的
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/


Dylan Verheul 的版本程式碼比較簡單, 但使用上也遇到一些問題
如果沒有設定顯示筆數的話, 展開的選單會太長, 但是如果設定顯示筆數的話, 其他就看不到了
所以設定顯示筆數時, 需要顯示捲軸讓使用者瀏覽。

為了達成這個目的, 在showResults()增加了二行css屬性
$results.css('overflow-y','auto');
$results.css('overflow-x','hidden');

會出現捲軸, 但是選單($results)變的超長的, 而且都是空白的選項

問題是出在 receiveData(q, data)裡
因為在IE上, 選單($results)顯示範圍內, 如果出現SELECT物件的話, 會被干擾而造成顯示不完全
所以會在選單($results)內加上IFRAME, 必須將以上程式碼註解掉, 但是就要另外處理被SELECT物件干擾的問題了
$results.append(document.createElement('iframe'));

處理方式是在選單的地方, 放上一樣大小的IFRAME, 然後不同圖層(Z-INDEX)
於是就多了一個物件($f)

接著就發現如果去拉捲軸時, 選單會自動關閉=__=+
在選單($results)上增加 focus 及 blus 二個事件
在輸入框($input)上改寫 focus 及 blus 二個事件
使用setTimeout來延遲選單的隱藏判斷

因為有了捲軸, 所以在輸入框中使用方向鍵往上跟往下時, 無法移動到正確的位置
在moveSelect(step)內, 增加了一些程式碼

線上展示：http://aqr198.googlepages.com/jquery.autocomplete.htm

範例下載：http://aqr198.googlepages.com/jquery.autocomplete.rar

其他修改部份
※額外參數(extraParams)改成方法回傳字串, 而不是使用KeyValue, 所以 this.setExtraParams 就沒有作用了
※增加 options.height 參數, 沒有使用筆數設定(options.maxItemsToShow)參數, 而是直接設定高度

如果要改成 asp.net 的 callback 的話, 可以改寫 requestData(q)內的 $.get(makeUrl(q), function(data){});
有興趣的人可以試試看^^

以上~~~