jQuery UI AutoComplete 自動完成使用小記
更新時間:2010年08月21日 12:54:47 作者:
jQuery UI AutoComplete 自動完成使用小記,使用jquery的朋友實現(xiàn)搜索自動完成等功能的朋友可以參考下。
頁面:
<%@ 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">關(guān)鍵詞</param>
/// <returns></returns>
private String GetLikeUserName(string key)
{
jhg.BLL.web_wordManager wordManager = new jhg.BLL.web_wordManager();
//搜索,返回10個關(guān)鍵詞
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;
效果圖:
復(fù)制代碼 代碼如下:
<%@ 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>
后臺:
復(fù)制代碼 代碼如下:
<%@ 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">關(guān)鍵詞</param>
/// <returns></returns>
private String GetLikeUserName(string key)
{
jhg.BLL.web_wordManager wordManager = new jhg.BLL.web_wordManager();
//搜索,返回10個關(guān)鍵詞
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 UI AutoComplete 使用說明
- jQuery UI Autocomplete 體驗分享
- jQuery UI Autocomplete 1.8.16 中文輸入修正代碼
- jQuery ui autocomplete選擇列表被Bootstrap模態(tài)窗遮擋的完美解決方法
- firefox下jQuery UI Autocomplete 1.8.*中文輸入修正方法
- jQuery.Autocomplete實現(xiàn)自動完成功能(詳解)
- jQuery 插件autocomplete自動完成應(yīng)用(自動補全)(asp.net后臺)
- jquery autocomplete自動完成插件的的使用方法
- jQuery autoComplete插件兩種使用方式及動態(tài)改變參數(shù)值的方法詳解
- jQuery Autocomplete自動完成插件
- jquery UI實現(xiàn)autocomplete在獲取焦點時得到顯示列表功能示例
相關(guān)文章
jQuery學(xué)習(xí)筆記之 Ajax操作篇(三) - 過程處理
對于 jQuery 通過 Ajax 方式傳遞數(shù)據(jù)時,我們還可以在過程中進(jìn)行一定的處理,以便達(dá)到我們的需求。2014-06-06jQuery Ajax自定義分頁組件(jquery.loehpagerv1.0)實例詳解
這篇文章主要介紹了jQuery Ajax自定義分頁組件(jquery.loehpagerv1.0)實例詳解,需要的朋友可以參考下2017-05-05jQuery實時統(tǒng)計輸入框字?jǐn)?shù)及限制
這篇文章主要為大家詳細(xì)介紹了jQuery實時統(tǒng)計輸入框字?jǐn)?shù)及限制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06基于jQuery的JavaScript模版引擎JsRender使用指南
這篇文章主要介紹了基于jQuery的JavaScript模版引擎JsRender使用指南,需要的朋友可以參考下2014-12-12jQuery Validate表單驗證深入學(xué)習(xí)
這篇文章主要介紹了jQuery Validate表單驗證入門知識,該插件捆綁了一套有用的驗證方法,包括 URL 和電子郵件驗證,同時提供了一個用來編寫用戶自定義方法的 API,感興趣的小伙伴們可以參考一下2015-12-12Jquery仿淘寶京東多條件篩選可自行結(jié)合ajax加載示例
仿淘寶京東多條件篩選可自行結(jié)合ajax加載,使用Jquery簡單實現(xiàn),具體如下,喜歡的朋友可以參考下2013-08-08