jquery+ajaxpro实现google输入提示效果(含拼音匹配)
2009-01-27 20:13
881 查看
页面代码：
后台代码：
汉字转拼音算法：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<mce:script language="javascript" src="javascript/jquery1.2.js" mce_src="javascript/jquery1.2.js"></mce:script>
<mce:script language="javascript"><!--
var __moveIndex = -1;
var _x;
var _y;
var _w;
var _data=[];
var eSrc = null;
var _searchUrl = '<%=ResolveClientUrl("~/search/?k=") %>';
$(function(){
eSrc = $('#<%=TKeyWord.ClientID %>');
addChoseDiv();
$("body").click(function(){
var target = event.srcElement || event.target;
var eID = $(target).attr("id");
if(eID!="TKeyWord")
{
$("#matchLay").hide();
}
});
});
//keydown事件
function keydown()
{
if(event.keyCode==13)//回车键
{
if(__moveIndex>0)
{
eSrc.val(_data[__moveIndex-1]["colKeyName"]);
$("#matchLay").hide();
document.location.href=_searchUrl+encodeURI(_data[__moveIndex-1]["colKeyName"]);
}
else if($.trim(eSrc.val())!=="")
{
$("#matchLay").hide();
document.location.href=_searchUrl+encodeURI(eSrc.val());
}
return false;
}
}
//初始化层
function addChoseDiv()
{
_x = pageX(eSrc[0]);
_y = pageY(eSrc[0])+eSrc.height()+5;
_w =eSrc.width()+4;
$("<div id='matchLay' z-index='500' style='background-color:#ffffff;display:none;width:"
+_w+"px;position:absolute;left:"+_x+"px;top:"+_y
+"px;border-left:1px solid #000000;border-bottom:1px solid #000000;border-right:1px solid #000000;' ></div>").appendTo($("body"));
}
//选定匹配项导航函数
function SelKey(obj)
{
eSrc.val($(obj).children().filter(":nth-child(1)").text());
document.location.href=_searchUrl+encodeURI(eSrc.val());
$("#matchLay").hide();
}
//匹配函数
function IsMatch()
{
var rs = $.ajax({
type:"GET",
cache:false,
url:"SearchPro.aspx",
success:function(data,status){
//alert(data);
}
});
var v = eSrc.val();
if(v=="")//输入为空,返回
{
$("#matchLay").hide();
return false;
}
_data = _Default.GetSkeys(v).value;
if(_data!=null && _data.length>0)//生成匹配div
{
var shtm = "<table width='100%' cellspacing='0' id='sList' >";
for(var i=0;i<_data.length;i++)
{
shtm+="<tr onmouseover='mouseOver(this)' onclick='SelKey(this)'><td align='left'>"+_data[i]["colKeyName"]+"</td>";
shtm+="<td align='right' style="color:green" mce_style="color:green">"+RelNumber(parseInt(_data[i]["colResults"],10))+" 结果</td>";
shtm+="</tr>"
}
shtm+="</table>";
$("#matchLay").html(shtm);
$("#matchLay").show();
return true;
}else //没有匹配隐藏div
{
$("#matchLay").hide();
return false;
}
}
//search Button click事件
function goSearch(k)
{
document.location.href=_searchUrl+encodeURI(k);
}
//onkeyup事件
function matchBase()
{
if(!IsMatch()) return false;//没有匹配返回
if(event.keyCode==38)//上箭头
{
if(__moveIndex==-1 || __moveIndex==1)
{
mouseOver($("#sList tr").length);
}else
{
mouseOver(__moveIndex-1,__moveIndex);
}
}
else if(event.keyCode==40)//下箭头
{
if(__moveIndex==$("#sList tr").length)
{
mouseOver(1,$("#sList tr").length);
}else
{
if(__moveIndex==-1)
{
mouseOver(1,1);
}else
{
mouseOver(__moveIndex+1,__moveIndex);
}
}
}
}
//提示层mouseover事件
function mouseOver()
{
var obj = null;
var n = __moveIndex ;
if(n==-1) n=1;
var oldObj =$("#sList tr:nth-child("+n+")");
if(typeof arguments[0]=="object")
{
obj = $(arguments[0]);
}else
{
obj = $("#sList tr:nth-child("+arguments[0]+")");
oldObj =$("#sList tr:nth-child("+arguments[1]+")");
}
oldObj.css("backgroundColor","#ffffff");
oldObj.children().filter(":nth-child(1)").css("color","#000000");
oldObj.children().filter(":nth-child(2)").css("color","green");
obj.css("backgroundColor","#3366CC");
obj.children().filter(":nth-child(1)").css("color","#ffffff");
obj.children().filter(":nth-child(2)").css("color","#ffffff");
__moveIndex = obj[0].rowIndex+1;
}
//格式化正整数123,456
function RelNumber(num)
{
var t=num>0?num:Math.abs(num);
var str=num.toString();
var il = str.length;
var n = 1;
while(t>1000)
{
t/=1000;
str=str.substring(0,il-n*3)+","+str.substr(il-n*3);
++n;
}
return str;
}
//取得元素x坐标
function pageX(elem)
{
return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
//取得元素y坐标
function pageY(elem)
{
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}
// --></mce:script>
</head>
<body>
<form runat="server">
<asp:TextBox AutoCompleteType="Disabled" runat="server" ID="TKeyWord" Width="250px" ></asp:TextBox>
<asp:Button runat="server" ID="Btn_search" Text="Search" />
</form>
</body>
</html>后台代码：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;
public partial class _Default : System.Web.UI.Page
{
private string NowKey = string.Empty;
SHOPBill.SmartSearch.SearchBill sBill = new SHOPBill.SmartSearch.SearchBill();
protected void Page_Load(object sender, EventArgs e)
{
Utility.RegisterTypeForAjax(typeof(_Default));
if (!IsPostBack)
{
TKeyWord.Attributes.Add("onkeyup", "matchBase();");
TKeyWord.Attributes.Add("onkeydown", "keydown();");
Btn_search.Style.Add("cursor", "hand");
Btn_search.Attributes.Add("align", "absmiddle");
Btn_search.Attributes.Add("onclick", "if($.trim($('#" + TKeyWord.ClientID + "').val())==''){alert('关键字不能为空!',false);return false};document.location.href='" + ResolveClientUrl("~/search/?k=") + "'+encodeURI($('#" + TKeyWord.ClientID + "').val())");
List<SHOPModule.SmartSearch.SearchItem> list = sBill.SelectKeys();
HttpContext.Current.Cache["SEARCHKEYS"] = list;
}
}
[AjaxPro.AjaxMethod]
public List<SHOPModule.SmartSearch.SearchItem> GetSkeys(string inputKey)
{
NowKey = inputKey;
List<SHOPModule.SmartSearch.SearchItem> list = null;
List<SHOPModule.SmartSearch.SearchItem> result = null;
if (HttpContext.Current.Cache.Get("SEARCHKEYS") == null)
{
list = sBill.SelectKeys();
HttpContext.Current.Cache["SEARCHKEYS"] = list;
}
else
{
list = HttpContext.Current.Cache.Get("SEARCHKEYS") as List<SHOPModule.SmartSearch.SearchItem>;
}
result = list.FindAll(ListMatch);
return result;
}
private bool ListMatch(SHOPModule.SmartSearch.SearchItem m)
{
string k = SHOPCommUtility.Hz2Py.GetWholePinyin(m.colKeyName);
return (MatchKeys(NowKey.ToLower(), m.colKeyName.ToLower()) || MatchKeys(NowKey.ToLower(), k.ToLower()));
}
private bool MatchKeys(string iKey, string K)
{
return K.Length >= iKey.Length && K.Substring(0, iKey.Length) == iKey;
}
}汉字转拼音算法：
using System;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using System.Text;
namespace SHOPCommUtility
{
/// <summary>
/// 汉字转拼音类
/// </summary>
public class Hz2Py
{
private static int[] pyValue = new int[]
{
-20319,-20317,-20304,-20295,-20292,-20283,-20265,-20257,-20242,-20230,-20051,-20036,
-20032,-20026,-20002,-19990,-19986,-19982,-19976,-19805,-19784,-19775,-19774,-19763,
-19756,-19751,-19746,-19741,-19739,-19728,-19725,-19715,-19540,-19531,-19525,-19515,
-19500,-19484,-19479,-19467,-19289,-19288,-19281,-19275,-19270,-19263,-19261,-19249,
-19243,-19242,-19238,-19235,-19227,-19224,-19218,-19212,-19038,-19023,-19018,-19006,
-19003,-18996,-18977,-18961,-18952,-18783,-18774,-18773,-18763,-18756,-18741,-18735,
-18731,-18722,-18710,-18697,-18696,-18526,-18518,-18501,-18490,-18478,-18463,-18448,
-18447,-18446,-18239,-18237,-18231,-18220,-18211,-18201,-18184,-18183, -18181,-18012,
-17997,-17988,-17970,-17964,-17961,-17950,-17947,-17931,-17928,-17922,-17759,-17752,
-17733,-17730,-17721,-17703,-17701,-17697,-17692,-17683,-17676,-17496,-17487,-17482,
-17468,-17454,-17433,-17427,-17417,-17202,-17185,-16983,-16970,-16942,-16915,-16733,
-16708,-16706,-16689,-16664,-16657,-16647,-16474,-16470,-16465,-16459,-16452,-16448,
-16433,-16429,-16427,-16423,-16419,-16412,-16407,-16403,-16401,-16393,-16220,-16216,
-16212,-16205,-16202,-16187,-16180,-16171,-16169,-16158,-16155,-15959,-15958,-15944,
-15933,-15920,-15915,-15903,-15889,-15878,-15707,-15701,-15681,-15667,-15661,-15659,
-15652,-15640,-15631,-15625,-15454,-15448,-15436,-15435,-15419,-15416,-15408,-15394,
-15385,-15377,-15375,-15369,-15363,-15362,-15183,-15180,-15165,-15158,-15153,-15150,
-15149,-15144,-15143,-15141,-15140,-15139,-15128,-15121,-15119,-15117,-15110,-15109,
-14941,-14937,-14933,-14930,-14929,-14928,-14926,-14922,-14921,-14914,-14908,-14902,
-14894,-14889,-14882,-14873,-14871,-14857,-14678,-14674,-14670,-14668,-14663,-14654,
-14645,-14630,-14594,-14429,-14407,-14399,-14384,-14379,-14368,-14355,-14353,-14345,
-14170,-14159,-14151,-14149,-14145,-14140,-14137,-14135,-14125,-14123,-14122,-14112,
-14109,-14099,-14097,-14094,-14092,-14090,-14087,-14083,-13917,-13914,-13910,-13907,
-13906,-13905,-13896,-13894,-13878,-13870,-13859,-13847,-13831,-13658,-13611,-13601,
-13406,-13404,-13400,-13398,-13395,-13391,-13387,-13383,-13367,-13359,-13356,-13343,
-13340,-13329,-13326,-13318,-13147,-13138,-13120,-13107,-13096,-13095,-13091,-13076,
-13068,-13063,-13060,-12888,-12875,-12871,-12860,-12858,-12852,-12849,-12838,-12831,
-12829,-12812,-12802,-12607,-12597,-12594,-12585,-12556,-12359,-12346,-12320,-12300,
-12120,-12099,-12089,-12074,-12067,-12058,-12039,-11867,-11861,-11847,-11831,-11798,
-11781,-11604,-11589,-11536,-11358,-11340,-11339,-11324,-11303,-11097,-11077,-11067,
-11055,-11052,-11045,-11041,-11038,-11024,-11020,-11019,-11018,-11014,-10838,-10832,
-10815,-10800,-10790,-10780,-10764,-10587,-10544,-10533,-10519,-10331,-10329,-10328,
-10322,-10315,-10309,-10307,-10296,-10281,-10274,-10270,-10262,-10260,-10256,-10254
};
private static string[] pyName = new string[]
{
"A","Ai","An","Ang","Ao","Ba","Bai","Ban","Bang","Bao","Bei","Ben",
"Beng","Bi","Bian","Biao","Bie","Bin","Bing","Bo","Bu","Ba","Cai","Can",
"Cang","Cao","Ce","Ceng","Cha","Chai","Chan","Chang","Chao","Che","Chen","Cheng",
"Chi","Chong","Chou","Chu","Chuai","Chuan","Chuang","Chui","Chun","Chuo","Ci","Cong",
"Cou","Cu","Cuan","Cui","Cun","Cuo","Da","Dai","Dan","Dang","Dao","De",
"Deng","Di","Dian","Diao","Die","Ding","Diu","Dong","Dou","Du","Duan","Dui",
"Dun","Duo","E","En","Er","Fa","Fan","Fang","Fei","Fen","Feng","Fo",
"Fou","Fu","Ga","Gai","Gan","Gang","Gao","Ge","Gei","Gen","Geng","Gong",
"Gou","Gu","Gua","Guai","Guan","Guang","Gui","Gun","Guo","Ha","Hai","Han",
"Hang","Hao","He","Hei","Hen","Heng","Hong","Hou","Hu","Hua","Huai","Huan",
"Huang","Hui","Hun","Huo","Ji","Jia","Jian","Jiang","Jiao","Jie","Jin","Jing",
"Jiong","Jiu","Ju","Juan","Jue","Jun","Ka","Kai","Kan","Kang","Kao","Ke",
"Ken","Keng","Kong","Kou","Ku","Kua","Kuai","Kuan","Kuang","Kui","Kun","Kuo",
"La","Lai","Lan","Lang","Lao","Le","Lei","Leng","Li","Lia","Lian","Liang",
"Liao","Lie","Lin","Ling","Liu","Long","Lou","Lu","Lv","Luan","Lue","Lun",
"Luo","Ma","Mai","Man","Mang","Mao","Me","Mei","Men","Meng","Mi","Mian",
"Miao","Mie","Min","Ming","Miu","Mo","Mou","Mu","Na","Nai","Nan","Nang",
"Nao","Ne","Nei","Nen","Neng","Ni","Nian","Niang","Niao","Nie","Nin","Ning",
"Niu","Nong","Nu","Nv","Nuan","Nue","Nuo","O","Ou","Pa","Pai","Pan",
"Pang","Pao","Pei","Pen","Peng","Pi","Pian","Piao","Pie","Pin","Ping","Po",
"Pu","Qi","Qia","Qian","Qiang","Qiao","Qie","Qin","Qing","Qiong","Qiu","Qu",
"Quan","Que","Qun","Ran","Rang","Rao","Re","Ren","Reng","Ri","Rong","Rou",
"Ru","Ruan","Rui","Run","Ruo","Sa","Sai","San","Sang","Sao","Se","Sen",
"Seng","Sha","Shai","Shan","Shang","Shao","She","Shen","Sheng","Shi","Shou","Shu",
"Shua","Shuai","Shuan","Shuang","Shui","Shun","Shuo","Si","Song","Sou","Su","Suan",
"Sui","Sun","Suo","Ta","Tai","Tan","Tang","Tao","Te","Teng","Ti","Tian",
"Tiao","Tie","Ting","Tong","Tou","Tu","Tuan","Tui","Tun","Tuo","Wa","Wai",
"Wan","Wang","Wei","Wen","Weng","Wo","Wu","Xi","Xia","Xian","Xiang","Xiao",
"Xie","Xin","Xing","Xiong","Xiu","Xu","Xuan","Xue","Xun","Ya","Yan","Yang",
"Yao","Ye","Yi","Yin","Ying","Yo","Yong","You","Yu","Yuan","Yue","Yun",
"Za", "Zai","Zan","Zang","Zao","Ze","Zei","Zen","Zeng","Zha","Zhai","Zhan",
"Zhang","Zhao","Zhe","Zhen","Zheng","Zhi","Zhong","Zhou","Zhu","Zhua","Zhuai","Zhuan",
"Zhuang","Zhui","Zhun","Zhuo","Zi","Zong","Zou","Zu","Zuan","Zui","Zun","Zuo"
};
/// <summary>
/// 把汉字转换成拼音(全拼)
/// </summary>
/// <param name="hzString">汉字字符串</param>
/// <returns>转换后的拼音(全拼)字符串</returns>
public static string GetWholePinyin(string hzString)
{
// 匹配中文字符
Regex regex = new Regex("^[/u4e00-/u9fa5]$");
byte[] array = new byte[2];
string pyString = "";
int chrAsc = 0;
int i1 = 0;
int i2 = 0;
char[] noWChar = hzString.ToCharArray();
for (int j = 0; j < noWChar.Length; j++)
{
// 中文字符
if (regex.IsMatch(noWChar[j].ToString()))
{
array = System.Text.Encoding.Default.GetBytes(noWChar[j].ToString());
i1 = (short)(array[0]);
i2 = (short)(array[1]);
chrAsc = i1 * 256 + i2 - 65536;
if (chrAsc > 0 && chrAsc < 160)
{
pyString += noWChar[j];
}
else
{
// 修正部分文字
if (chrAsc == -9254) // 修正"圳"字
pyString += "Zhen";
else
{
for (int i = (pyValue.Length - 1); i >= 0; i--)
{
if (pyValue[i] <= chrAsc)
{
pyString += pyName[i];
break;
}
}
}
}
}
// 非中文字符
else
{
pyString += noWChar[j].ToString();
}
}
return pyString;
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用jQuery + Ajax实现Google输入提示功能
- 用jQuery + Ajax实现Google输入提示功能
- 用 jQuery + Ajax 实现 Google 的输入提示功能
- 实现类似google搜索效果，文本框输入智能提示，没有用ajax控件和第三方控件，完全手写代码
- 实现类似google搜索效果，文本框输入智能提示，（经过改进 支持多个文本框的效果）
- 使用jquery 实现 仿google 的智能提示输入框功能
- 用jQuery的ajax的功能实现输入自动提示的功能
- JQuery_JAVA_利用jQuery的AJAX和JSON实现可输入下拉框提示
- jquery,ajax 实现autocomplete,输入提示
- 实现输入内容提示的功能（仿google_百度输入框提示）jquery.ui.autocomplete.js插件
- JQuery+AJAX实现搜索文本框的输入提示功能
- 使用jquery 实现 仿google 的智能提示输入框功能 (改进版本)
- 实现输入内容提示的功能（仿google_百度输入框提示）jquery.ui.autocomplete.js插件
- jquery实现表单输入时提示文字滑动向上效果
- JQuery_JAVA_利用jQuery的AJAX和JSON实现可输入下拉框提示
- 安卓初学：Android实现输入文本自动匹配提示效果总结
- ajax实现输入提示效果
- 使用FlexBox和Json实现类似ComboBox（类似Google的输入提示和自动）功能-基于JQuery-ASP.NET
- jquery实现表单输入时提示文字滑动向上效果
- jquery autocomplete 自己实现div达到输入提示效果