jQuery UI AutoComplete 自动完成使用小记
发布时间：2013-08-03 编辑：jiaochengji.com
jQuery UI AutoComplete 自动完成使用小记，使用jquery的朋友实现搜索自动完成等功能的朋友可以参考下。
jquery ui AutoComplete 自动完成使用小记，使用jquery的朋友实现搜索自动完成等功能的朋友可以参考下。
页面:
<%@ 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;
效果图:
复制代码 代码如下:
<%@ 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;
效果图:
您可能感兴趣的文章：
jQuery自动完成插件 jQuery AutoComplete
jQuery plugin for autocomplete
jQuery的自动完成插件 Autocomplete
jQuery UI AutoComplete 自动完成使用小记
jQuery UI AutoComplete 使用说明
JQuery autocomplete 使用手册
jQuery UI Autocomplete 体验分享
Flex AutoComplete
jqueryui之autocomplete
jQuery UI 教程之一 ——入门
[关闭]