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, //自动完成激活之前填入的最小字符
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">
&nbsp; &nbsp;数据库中提出:
<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();
}

  

原文地址:https://www.cnblogs.com/Soulless/p/Jquery.html