在asp.net工程中使用jQuery-ui的autocomplete功能

最新推荐文章于 2019-06-10 18:38:00 发布

清泉灵弦

最新推荐文章于 2019-06-10 18:38:00 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： C#样例

本文链接：https://blog.youkuaiyun.com/FireGhost57/article/details/50916242

本文介绍了如何在ASP.NET项目中结合jQuery-ui的autocomplete功能，通过前端HTML发起请求调用Handler.ashx处理JSON数据，实现服务器端查询并返回前端的自动补全效果。主要代码集中在Default.aspx.cs页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整理技术核心在于前端html请求调用Handler.ashx页面查询json结果返回给前端页

几乎大部分交互都是基于jQuery在前端完成，而自动完成（autocomplete）的结果需要服务器进行查询，因此在html请求的过程中进行数据交互处理才能实现这个效果

Default.aspx.cs页核心代码

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript" src="js/jquery.js"></script>
	<link type="text/css" rel="stylesheet" href="css/jquery-ui.css" />
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<script type="text/javascript">
		$(function () {
			$("#txtSearch").autocomplete({
				minLength: 1,	// 设置搜索的关键字最小长度
				max: 10,		// 下拉项目的个数
				source: function (request, response) {// 设置自动完成列表的函数,函数包括两个参数,requset 和 response
					$.ajax({
						type: "POST", // 通过 request.term 可以获得文本框内容
						url: "Handler.ashx?keyword=" + request.term, // 使用 Handler.ashx?keyword= 传参
						contentType: "application/json; charset=gb2312",