jquery.AutoComplete 仿百度文本框感应

前台代码:

 

 <head runat="server">

     < title > AutoComplete </ title >
    
< script  src ="js/jquery-1.3.2.js"  type ="text/javascript" ></ script >
    
< script  src ="js/jquery.autocomplete.js"  type ="text/javascript" ></ script >
    
< script  src ="js/localdata.js"  type ="text/javascript" ></ script >
    
< link  href ="css/jquery.autocomplete.css"  rel ="stylesheet"  type ="text/css"   />
    
< link  href ="css/main.css"  rel ="stylesheet"  type ="text/css"   />
    
< link  href ="css/thickbox.css"  rel ="stylesheet"  type ="text/css"   />

    
< script  type ="text/javascript" >
        $().ready(
function  () {
            
// example
            $( " #autocom " ).autocomplete( " data.aspx " , {
                minChars: 
1 ,
                max: 
50 ,
                width: 
200 ,
                scrollHeight:
50 , // 卷轴高度
                scroll:  false ,
                scrollHeight: 
100 ,
                
// autoFill: true, //当鼠标经过某项时,自动填充文本框
                mustMatch:  false // 如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false 
                 // matchContains: true, //决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false 
                extraParams: { bar:  4  },  // 传参

                
// 需要把data转换成json数据格式
                parse:  function  (data) {
                    
return  $.map(eval(data),  function  (row) {
                        
return  {
                            data: row,
                            value: row.name,
                            
// result: row.name + " <" + row.to + ">"
                            result:row.name
                        }
                    });
                },
                formatItem: 
function  (data, i, total) {
                    
return  data.name  +  data.to
                },
                formatMatch: 
function  (data, i, total) {
                    
return  data.name;
                },
                formatResult: 
function  (data, value) {
                    
return  data.name;
                }
            }).result(
function  (event, data, formatted) {  // 回调
                 //  alert(data.to);
                $( " #content " ).html(data.to);
            });
        })
    
</ script >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
&nbsp;   &nbsp; 数据库中提出:
    
< asp:TextBox  runat ="server"  ID ="autocom" ></ asp:TextBox >
    
<!-- <input type="text" id="autocom" /> -->
    
< div  id ="content" >
    
</ div >
    
</ form >
</ body >

data.aspx后台代码:


        protected void Page_Load(object sender, EventArgs e)

  {
            if (!IsPostBack)
            {
                
//bool flag = true;
                
//Response.Write(flag ? "1" : "0");

                Response.Clear();
                Response.Charset = "utf-8";
                Response.Buffer = true;
                
this.EnableViewState = false;
                Response.ContentEncoding = System.Text.Encoding.UTF8;
                Response.ContentType = "text/plain";
                Response.Write(GetLikeUserName());
                Response.Flush();
                Response.Close();
                Response.End();
            }
        }

        
private string GetLikeUserName()
        {
            
string param = Request.QueryString["q"].ToString();//获取参数
            string bar = Request.QueryString["bar"].ToString();//

            
string[] str = { "January""Ceshi""jQuery""josn""February""March""April""May""June""July""August""September""October""November""December" };
            StringBuilder sbstr = new StringBuilder();
            sbstr.Append("[");
            
for (int i = 0; i < str.Length; i++)
            {
                
if (str[i].Contains(param))
                {
                    
if (i == str.Length - 1)
                    {
                        sbstr.Append("{name:'" + str[i] + "',to:'最后中文测试" + i + "'}");
                    }
                    
else
                    {
                        sbstr.Append("{name:'" + str[i] + "',to:'中文测试" + i + "'},");
                    }
                }
            }
            sbstr.Append("]");

            
return sbstr.ToString();
        }

效果图:

jquery.AutoComplete 仿百度文本框感应

你可能感兴趣的:(autocomplete)