Jquery的AutoComplete插件初级使用
前台代码：
<head runat="server">
<title></title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.autocomplete.min.js" type="text/javascript"></script>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#keyword').autocomplete("Default.aspx", {//Default.aspx是后台处理页面
max: 12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
multiple: true, //是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
multipleSeparator: ",", //如果是多选时,用来分开各个选择的字符. Default: ","
//需要把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 (row, i, max) {
return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
},
formatMatch: function (row, i, max) {
return row.name + row.to;
},
formatResult: function (row) {
return row.to;
}
}).result(function (event, row, formatted) {
alert(row.to);
});
});
</script>
</head>
<body>
<form id="form2" runat="server">
数据库中提出:
<asp:TextBox runat="server" ID="autocom"></asp:TextBox>
<input id="keyword" />
<input id="getValue" value="GetValue" type="button" />
<!--<input type="text" id="autocom" />-->
<div id="content">
</div>
</form>
</body>
后台代码：
protected void Page_Load(object sender, EventArgs e)
{
//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[] 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();
}
