Skip to content

用 mootools 打造 Autocomplete List

十月 3, 2007

mootools 是一套相當好用的 Javascript 套件,可以用來做許多號稱 Web 2.0 網站所需要的功能,看看官方網站的 demo 就知道花樣很多。

其實原本對 AJAX framework 一類的東西並沒有很感興趣,也接觸的不多,不過自從踏入社會之後,一來是 Ken 學長介紹,二來工作上也必須使用 mootools 來進行一些功能的開發,於是便開始對這類的 Ajax 套件有了一些感覺。

先前在 這裡 看到別人利用 mootools 來打造類似 google suggest 查詢功能的 Autocompleter,它的 範例 看起來的確滿酷的,不過雖然它符合我的需求,有些地方還是得自己來,這是作者針對某位朋友提出加上 XML Parser 功能所回應的︰

That’s how it works, you can simply extend the basic classes with your own code. I don’t wanted to add Xml support because every format can be so different and extending the Ajax base class with Xml support is very easy.

因為後面 Server 吐的資料是 XML 文件,所以得自己弄個 XML Parser 並搭配 mootools 的 XHR 物件包裝過的 XmlHttpRequest,來跟 Server 要資料。看了一下 Autocompleter 的程式,只要在 Autocompleter.Ajax.Base 類別的 initialize 函數這裡稍加修改︰


initialize: function(el, url, options) {
this.parent(el, options);
this.url = url;
this.ajax = new XHR({
method:"POST",
async:false
});
this.ajax.addEvent('onSuccess', this.queryResponse.bind(this));
this.ajax.addEvent('onFailure', this.queryResponse.bind(this, [false]));
},

然後再自己建個 Autocompleter.Ajax.XML 去繼承剛剛改過的 Autocompleter.Ajax.Base,剩下的工就是在自己的 Autocompleter.Ajax.XML 類別裡做完要做的事情,大致上程式碼也刻得差不多了。

接下來就弄個網頁試試,看起來效果挺不錯的︰




Autocompleter List Demo

Originally uploaded by Keanu.
廣告
No comments yet

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: