1.採用靜態數據javascript
$("#basic").CalvinAutoComplete({ AutoInput: false, MenuHideAuto: false, min: 1, source: ["許志偉1", "許志偉2", "許志偉3", "許志偉4", "許志偉5"] });
效果圖以下:php
2.自定義點擊選中事件java
$("#TxtEventTest").CalvinAutoComplete({ styleInfo: { width: 250 }, min: 1, source: [ { "text": "許志偉1", "value": "沙發上" }, { "text": "許志偉2", "value": "3" }, { "text": "許志偉3", "value": "3" } ], selected: function (event, ui) { alert(ui.text); alert(ui.value); } });
3.請求後臺數據(aspx,php,webservice等等)git
aspx頁面代碼github
[WebMethod] public static List<valuetext> GetPerson(string key, string name) { //固然這裏你能夠從數據庫根據你傳進來的值進行查詢操做,下面只是模擬一些靜態數據 List<valuetext> l = new List<valuetext>(); valuetext s = new valuetext() { text = "許志偉1", value = 1 }; l.Add(s); valuetext s1 = new valuetext() { text = "許志偉2", value = 2 }; l.Add(s1); valuetext s2 = new valuetext() { text = "許志偉3", value = 3 }; l.Add(s2); return l; }
js代碼web
$("#Text2").CalvinAutoComplete( { min: 1, dynamicSource: true, ajaxOption: { type: "post", url: "Default.aspx/GetPerson", contentType: "application/json", dataType: "json", data: { "name": "xuzhiwei" } } });
效果圖以下:ajax
4.參數說明數據庫
參數 | 數據類型 | 默認值 | 說明 |
---|---|---|---|
min | Number | 1 | 智能提示的文本長度json |
source | Array | [] | 靜態數據app |
AutoInput | Boolean | true | 是否自動把點擊的選項填到文件框 |
MenuHideAuto | Boolean | true | 點擊選項後下拉菜單自動消失 |
dynamicSource | Boolen | false | 採用ajax形式動態數據(若是是ajax獲取數據必定要true) |
ajaxOption | Object | $.ajaxSettings | ajax請求參數配置 |
selected | Function | 空函數 | 2個參數(event,ui),第一個參數是點擊事件,第二個參數是點擊的項,具備text,value屬性 |
styleInfo | json | null | 下拉菜單的樣式 |
示例代碼下載 如使用過程當中有問題或者建議加QQ羣14804593(入羣請註明 博客園或者github) 或者下面回覆。