前台:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../jqueryui/css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />
<style>
.autocomplete-item-title
{
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<xageManager ID="ageManager1" runat="server" />
<x:SimpleForm ID="SimpleForm1" runat="server" LabelWidth="60px" Width="600px" BodyPadding="5px"
EnableBackgroundColor="true" Title="简单表单">
<Items>
<x:TextBox ID="TextBox1" runat="server" Label="标题" EmptyText="输入字母 j 试试">
</x:TextBox>
<x:TextBox ID="TextBox2" Label="值" runat="server">
</x:TextBox>
<x:TextBox ID="TextBox3" Label="描述" runat="server">
</x:TextBox>
</Items>
</x:SimpleForm>
</form>
<script src="../jqueryui/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../jqueryui/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
function onReady() {
var textbox1ID = '<%= TextBox1.ClientID %>';
var textbox2ID = '<%= TextBox2.ClientID %>';
var textbox3ID = '<%= TextBox3.ClientID %>';
var cache = {};
$('#' + textbox1ID).autocomplete({
minLength: 0,
source: function(request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
$.getJSON("MuileCus.ashx", request, function(data, status, xhr) {
cache[term] = data;
response(data);
});
},
select: function (event, ui) {
var $this = $(this);
$this.val(ui.item.label);
$('#' + textbox2ID).val(ui.item.value);
$('#' + textbox3ID).val(ui.item.desc);
return false;
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li>").data("item.autocomplete", item)
.append("<a><span class='autocomplete-item-title'>" + item.label + "</span><br/>" + item.desc + "</a>")
.appendTo(ul);
};
}
</script>
</form>
</body>
</html>
后台:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.Sql;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Text ;
namespace FineUI2
{
public class MuileCus : IHttpHandler
{
StringBuilder jsonString = new StringBuilder();
public void ProcessRequest(HttpContext context)
{
//System.Threading.Thread.Sleep(2000);
String term = context.Request.QueryString["term"];
if (!String.IsNullOrEmpty(term))
{
term = term.ToLower();
jsonString.Append("[{'value': 'jquery,label': 'jQuery', 'desc: the write less, do more, JavaScript library'},{'value': 'jquery-ui ldm12','label': 'jQuery UI ldm12', 'desc: the official user interface library for jQuery ldm'},{'value': 'sizzlejs,label': 'Sizzle JS','desc: a pure-JavaScript CSS selector engine'}]");
context.Response.ContentType = "text/plain";
context.Response.Write(jsonString.ToString());
//context.Response.Write(ja.ToString());
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
没显示,不知道那地方出错 |