整理技术核心在于前端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",