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

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) 或者下面回覆。

相關文章
相關標籤/搜索