模擬百度,谷歌自動補全 智能提示文本框------- calvin ui之autocomplete

1.采用靜態數據

 $("#basic").CalvinAutoComplete({
                AutoInput: false,
                MenuHideAuto: false,
                min: 1,
                source: ["許志偉1", "許志偉2", "許志偉3", "許志偉4", "許志偉5"]
            });

效果圖如下：

2.自定義點擊選中事件

 $("#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等等）

aspx頁面代碼

    [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代碼

 $("#Text2").CalvinAutoComplete(
            {
                min: 1,
                dynamicSource: true,
                ajaxOption: {
                    type: "post",
                    url: "Default.aspx/GetPerson",
                    contentType: "application/json",
                    dataType: "json",
                    data: { "name": "xuzhiwei" }
                }
            });

　效果圖如下：

 4.參數說明

參數	數據類型	默認值	說明
min	Number	1	智能提示的文本長度
source	Array	[]	靜態數據
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） 或者下面回復。