jquery.AutoComplete 仿百度文本框感应
前台代码：
<head runat="server">
<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">
数据库中提出:
<asp:TextBox runat="server" ID="autocom"></asp:TextBox>
<!--<input type="text" id="autocom" />-->
<div id="content">
</div>
</form>
</body>
data.aspx后台代码：
{
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();
}
效果图：
