[Javascript]AutoComplete自動完成效果

之前為了做這AutoComplete效果找了好多資料,不過大都是jQuery的,當然不是不好用,只是在一個頁面載入prototypejQeruy就會有些衝突的問題要解決

效果大概會像下面這樣子

AutoComplete1.png




作者的資訊如下:

Ajax Autocomplete for Prototype, version 1.0.3

(c) 2008 Tomas Kirda

http://www.devbridge.com/projects/autocomplete/

雖然版本不是很新,不過很完整,只要在自己需要的地方再做些修改就可以了

範例提供如下:

以下提供一個範例,只需開啟AutoComplete.html然後輸入Li ,就會由response.html回傳一個json格式顯示出來。
原始碼下載點

範例畫面

AutoComplete2.png

使用方法

  1. 載入prototype1.6版本
  2. 載入autocomplete.js
  3. 載入Autocomplete用的css
  4. 建立一個input輸入區
  5. new 一個Autocomplete告知來啟動這個效果

以下是大程式部份

回傳的json格式,這部份應該寫程式依參數來取得資料

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

*