[Javascript]AutoComplete自動完成效果
之前為了做這AutoComplete效果找了好多資料，不過大都是jQuery的，當然不是不好用，只是在一個頁面載入prototype跟jQeruy就會有些衝突的問題要解決。
效果大概會像下面這樣子
作者的資訊如下：
Ajax Autocomplete for Prototype, version 1.0.3
(c) 2008 Tomas Kirda
http://www.devbridge.com/projects/autocomplete/
雖然版本不是很新，不過很完整，只要在自己需要的地方再做些修改就可以了
範例提供如下：
以下提供一個範例，只需開啟AutoComplete.html然後輸入Li ，就會由response.html回傳一個json格式顯示出來。
下載點：
範例畫面
使用方法
- 載入prototype1.6版本
- 載入autocomplete.js
- 載入Autocomplete用的css
- 建立一個input輸入區
- new 一個Autocomplete告知來啟動這個效果
以下是大程式部份
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script type="text/javascript" src="js/prototype.js" ></script> <script type="text/javascript" src="js/autocomplete.js"></script> <link href="css/styles_autoComplete.css" type="text/css" rel="stylesheet"/> <input type="text" name="q" id="query" /> <script type="text/javascript"> new Autocomplete('query', { serviceUrl:'response.html', minChars:2, maxHeight:400, width:300, deferRequestBy:100, // callback function: onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); } }); </script> |
回傳的json格式，這部份應該寫程式依參數來取得資料
1 2 3 4 5 | { query:'Li', suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], data:['LR','LY','LI','LT'] } |
留下您想說的話：