模拟百度,谷歌自动补全 智能提示文本框------- 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） 或者下面回复。