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

jQuery UI AutoComplete 自动完成使用小记

2010-08-21 00:00 896 查看

页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="web_Test" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>测试</title> 
<link type="text/css" rel="stylesheet" /> 
<link href="../css/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<!-- 解决下拉列表框被遮盖 jquery.bgiframe --> 
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.bgiframe-2.1.1.js"></script> 
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.core.js"></script> 
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.widget.js"></script> 
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.mouse.js"></script> 
<!-- jquery.ui.autocomplete --> 
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.autocomplete.js"></script> 
<script language="javascript" type="text/javascript"> 
$(function(){ 
$("#txtTest").autocomplete({ 
minLength:1, 
source: function(request, response) { 
$.ajax({ 
url: "../ajax/GetAllWords.ashx", 
dataType: "json", 
data: request, 
success: function( data ) { 
response( data ); 
} 
}); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input id="txtTest" type="text" /> 
</div> 
</form> 
</body> 
</html>

后台:

<%@ WebHandler Language="C#" Class="GetAllWords" %> 
using System; 
using System.Web; 
public class GetAllWords : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
if (context.Request.QueryString["term"] != null && context.Request.QueryString["term"] != "") 
{ 
context.Response.Clear(); 
context.Response.Charset = "utf-8"; 
context.Response.Buffer = true; 
context.Response.ContentEncoding = System.Text.Encoding.UTF8; 
context.Response.ContentType = "text/plain"; 
context.Response.Write(GetLikeUserName(context.Request.QueryString["term"])); 
context.Response.Flush(); 
context.Response.Close(); 
context.Response.End(); 
} 
} 
/// <summary> 
/// 拼接json 
/// </summary> 
/// <param name="key">关键词</param> 
/// <returns></returns> 
private String GetLikeUserName(string key) 
{ 
jhg.BLL.web_wordManager wordManager = new jhg.BLL.web_wordManager(); 
//搜索,返回10个关键词 
string[] listWord = wordManager.GetSearchWord(key, 10); 
System.Text.StringBuilder sbstr = new System.Text.StringBuilder("["); 
int ct = listWord.Length; 
for (int i = 0; i < ct; i++) 
{ 
sbstr.Append("\"" + listWord[i] + "\""); 
if (i == ct - 1) 
sbstr.Append("]"); 
else 
sbstr.Append(","); 
} 
return sbstr.ToString(); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}

注:
文件:jquery.ui.autocomplete.css
.ui-autocomplete { position: absolute; cursor: default; }
去掉: position: absolute;
效果图:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航