您的位置：首页 > Web前端 > JQuery

Asp.net文本框输入提示功能（jquery-autocomplete）

2016-08-31 15:59 549 查看
上一篇文章讲解了jquery-ui实现文本框输入提示功能的做法，后来又发现了一个挺好用的能实现文本框输入提示功能的jquery插件jquery-autocomplete，这次讲一下他的用法。



引入所需文件

<script type="text/javascript" src="JS/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.autocomplete.min.js"></script>
<link href="CSS/jquery.autocomplete.css" rel="stylesheet" />


动态单属性数据源

前台代码：

$(document).ready(function () {
$("#txtAutoComplete").autocomplete("AutoComplete.ashx", {
max: 10,             //列表里的条目数
minChars: 1,         //自动完成激活之前填入的最少字符
scrollWidth: 173,    //提示的宽度，溢出隐藏
scrollHeight: 200,   //提示的高度，溢出显示滚动条
scroll: true,        //是否显示滚动条
matchContains: true, //包含匹配，是否只显示匹配项
autoFill: false,     //自动填充
//此处实际请求的URL为"AutoComplete.ashx?q='[你在txtAutoComplete中输入的值]'&action='autoComplete'&value='guo'"
extraParams: { action: "autoComplete", value: "guo" },
//格式化列表中的条目 row:条目对象,i:当前条目index,max:总条目数
formatItem: function (row, i, max) {
//【不用转化为js对象，但必须返回row.toString()】
return row.toString();
},
//配合formatItem使用，作用在于，由于使用了formatItem，所以显示的条目内容有所改变，
//而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据
formatMatch: function (row, i, max) {
//【不用转化为js对象，但必须返回row.toString()】
return row.toString();
},
//设置用户选择某一条目后文本框显示的内容
formatResult: function (row) {
//【不用转化为js对象，但必须返回row.toString()】
return "文本框显示的结果：" + row.toString();
}
}).result(function (event, row, formatted) {
//获取用户选择的条目
alert(row.toString());
});
});
<body>
<form id="form1" runat="server">
请输入：<input type="text" id="txtAutoComplete" />
</form>
</body>


AutoComplete.ashx后台代码：

public class AutoComplete : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//text表示用户在文本框输入的内容
string text = context.Request.QueryString["q"];
string action = context.Request.QueryString["action"];
string value = context.Request.QueryString["value"];
<!--各项之间必须用"\n"隔开，不能用","隔开-->
string strResult = "guo\ntong\nchang\nwang\nhao\nbang";
context.Response.Write(strResult);
}

public bool IsReusable
{
get
{
return false;
}
}
}


动态多属性数据源

前台代码：

$(document).ready(function () {
$("#txtAutoComplete").autocomplete("AutoComplete.ashx", {
max: 10,             //列表里的条目数
minChars: 1,         //自动完成激活之前填入的最少字符
width: 173,          //提示的宽度，溢出隐藏
scrollHeight: 200,   //提示的高度，溢出显示滚动条
scroll: true,        //是否显示滚动条
matchContains: true, //包含匹配，是否只显示匹配项
autoFill: false,     //自动填充
//此处实际请求的URL为"AutoComplete.ashx?q='[你在txtAutoComplete中输入的值]'&action='autoComplete'&value='guo'"
extraParams: { action: "autoComplete", value: "guo" },
//格式化列表中的条目，使其以自定义格式显示
//row:条目对象,i:当前条目index,max:总条目数
formatItem: function (row, i, max) {
//转换成js对象 【不同点1】
var obj = eval('(' + row + ')');
return i + "/" + max + "： " + obj.key + obj.value;
},
//配合formatItem使用，作用在于，由于使用了formatItem，所以显示的条目内容有所改变，
//而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据
formatMatch: function (row, i, max) {
//转换成js对象
//获取对象中的某一属性时，名称严格区分大小写
var obj = eval('(' + row + ')');
return "Match：" + obj.key + row.value;
},
//设置用户选择某一条目后文本框显示的内容
formatResult: function (row) {
//转换成js对象
var obj = eval('(' + row + ')');
return "文本框显示的结果：" + obj.key;
}
}).result(function (event, row, formatted) {
//获取用户选择的条目,并转换成js对象
var obj = eval('(' + row + ')');
alert(obj.key);
});
});
<body>
<form id="form1" runat="server">
请输入：<input type="text" id="txtAutoComplete" />
</form>
</body>


AutoComplete.ashx后台代码：

public class AutoComplete : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//text表示用户在文本框输入的内容
string text = context.Request.QueryString["q"];
string action = context.Request.QueryString["action"];
string value = context.Request.QueryString["value"];
<!--数据格式【不同点2】-->
<!--各项之间必须用"\n"隔开，不能用","隔开-->
string strResult = "{key:\"one\",value:\"第一\"}\n"+
"{key:\"two\",value:\"第二\"}\n"+
"{key:\"three\",value:\"第三\"}\n"+
"{key:\"four\",value:\"第四\"}\n"+
"{key:\"five\",value:\"第五\"}\n"+
"{key:\"six\",value:\"第六\"}";
context.Response.Write(strResult);
}

public bool IsReusable
{
get
{
return false;
}
}
}


ajax动态绑定数据源

前台代码：

function bindAutoComplete() {
$.ajax({
type: "POST",
contentType: "application/json",
url: "AutoComplete.aspx/GetHintsInfo",
data: "{no:'aaa'}",
dataType: "json",
success: function (msg) {
var datas = eval("(" + msg.d + ")");
$("#txtProjectNO").autocomplete(datas, {
formatItem: function (row, i, max) {
return "<table width='100px'><tr><td align='left'>" + row.ProjectNo + "</td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>" + row.ProjectName + "</font>  </td></tr></table>";
},
formatMatch: function (row, i, max) {
return row.ProjectNo;
}
}).result(function (event, item) {
$("#txtProjectName").val(item.ProjectName);
$("#txtDesigner").val(item.Designer);
$("#txtBudget").val(item.Budget);
});
}
});
}


AutoComplete.aspx后台代码：

[WebMethod]
public static string GetAllHintsSomeField(string no)
{
List<ProjectInfo> list = new List<ProjectInfo>();
BLL.CommonBLL commonBLL = new BLL.CommonBLL();
string where = "IsClosed=0";
DataTable dt = commonBLL.GetList("View_Project", where);
for (int i = 0; i < dt.Rows.Count; i++)
{
list.Add(new ProjectInfo()
{
ProjectNo = dt.Rows[i]["ProjectNo"].ToString(),
ProjectName = dt.Rows[i]["ProjectName"].ToString(),
Designer = dt.Rows[i]["Designer"].ToString(),
Budget = dt.Rows[i]["Budget"].ToString()
});
}
DataContractJsonSerializer serializer = new DataContractJsonSerializer(list.GetType());
using (MemoryStream ms = new MemoryStream())
{
serializer.WriteObject(ms, list);
return System.Text.Encoding.UTF8.GetString(ms.ToArray());
}
}


jquery.autocomplete.min.js文件免费下载地址：http://download.csdn.net/detail/xiaouncle/9618021

jquery.autocomplete.css文件免费下载地址：http://download.csdn.net/detail/xiaouncle/9618024
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  asp.net jquery auto complete jquery插件
相关文章推荐
新的分享
章节导航