找回密码
当前位置：Mikel > 开发笔记 > 正文

[JQuery]JQuery自动提示插件

2009-06-15 分类：开发笔记 阅读(903) 评论(0)

页面代码： 

view plaincopy to clipboardprint?
  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head id="Head1" runat="server">  
  5. <mce:script language="JavaScript" src="JavaScript/JQuery1.2.js" mce_src="JavaScript/JQuery1.2.js"></mce:script>  
  6. <mce:script language="javascript"><!–  
  7.     var __moveIndex = -1;  
  8.     var _x;  
  9.     var _y;  
  10.     var _w;  
  11.     var _data=[];  
  12.     var eSrc = null;  
  13.     var _searchUrl = '<%=ResolveClientUrl("~/search/?k=") %>';  
  14.     $(function(){  
  15.         eSrc = $('#<%=TKeyWord.ClientID %>');  
  16.         addChoseDiv();  
  17.         $("body").click(function(){  
  18.             var target = event.srcElement || event.target;  
  19.             var eID = $(target).attr("id");  
  20.             if(eID!="TKeyWord")  
  21.             {  
  22.                 $("#matchLay").hide();     
  23.             }  
  24.         });  
  25.     });  
  26.       
  27.     //keydown事件  
  28.     function keydown()  
  29.     {  
  30.         if(event.keyCode==13)//回车键  
  31.         {  
  32.             if(__moveIndex>0)  
  33.             {  
  34.                 eSrc.val(_data[__moveIndex-1]["colKeyName"]);  
  35.                 $("#matchLay").hide();  
  36.                 document.location.href=_searchUrl+encodeURI(_data[__moveIndex-1]["colKeyName"]);  
  37.             }  
  38.             else if($.trim(eSrc.val())!=="")  
  39.             {  
  40.                 $("#matchLay").hide();  
  41.                 document.location.href=_searchUrl+encodeURI(eSrc.val());  
  42.             }  
  43.              
  44.            return false;  
  45.         }  
  46.     }  
  47.       
  48.     //初始化层  
  49.     function addChoseDiv()  
  50.     {  
  51.         _x = pageX(eSrc[0]);  
  52.         _y = pageY(eSrc[0])+eSrc.height()+5;  
  53.         _w =eSrc.width()+4;  
  54.           
  55.         $("<div id='matchLay' z-index='500'   style='background-color:#ffffff;display:none;width:"  
  56.         +_w+"px;position:absolute;left:"+_x+"px;top:"+_y  
  57.         +"px;border-left:1px solid #000000;border-bottom:1px solid #000000;border-right:1px solid #000000;' ></div>").appendTo($("body"));  
  58.     }  
  59.       
  60.     //选定匹配项导航函数  
  61.     function SelKey(obj)  
  62.     {  
  63.        eSrc.val($(obj).children().filter(":nth-child(1)").text());  
  64.        document.location.href=_searchUrl+encodeURI(eSrc.val());  
  65.        $("#matchLay").hide();    
  66.     }  
  67.       
  68.     //匹配函数  
  69.     function IsMatch()  
  70.     {  
  71.       
  72.         var rs = $.ajax({  
  73.             type:"GET",  
  74.             cache:false,  
  75.             url:"SearchPro.aspx",  
  76.             success:function(data,status){  
  77.                 //alert(data);  
  78.             }  
  79.         });  
  80.   
  81.         var v = eSrc.val();  
  82.         if(v=="")//输入为空,返回  
  83.         {  
  84.             $("#matchLay").hide();     
  85.             return false;  
  86.         }  
  87.           
  88.         _data = _Default.GetSkeys(v).value;  
  89.           
  90.         if(_data!=null && _data.length>0)//生成匹配div  
  91.         {  
  92.             var shtm = "<table width='100%' cellspacing='0' id='sList' >";  
  93.             for(var i=0;i<_data.length;i++)  
  94.             {  
  95.                 shtm+="<tr  onmouSEOver='mouSEOver(this)'  onclick='SelKey(this)'><td align='left'>"+_data[i]["colKeyName"]+"</td>";  
  96.                 shtm+="<td align='right' style="color:green" mce_style="color:green">"+RelNumber(parseInt(_data[i]["colResults"],10))+" 结果</td>";  
  97.                 shtm+="</tr>"  
  98.             }  
  99.             shtm+="</table>";  
  100.             $("#matchLay").html(shtm);  
  101.             $("#matchLay").show();     
  102.             return true;  
  103.         }else //没有匹配隐藏div  
  104.         {  
  105.             $("#matchLay").hide();     
  106.             return false;  
  107.         }  
  108.     }  
  109.   
  110.     //search Button click事件  
  111.     function goSearch(k)  
  112.     {  
  113.         document.location.href=_searchUrl+encodeURI(k);  
  114.     }  
  115.       
  116.     //onkeyup事件  
  117.     function matchBase()  
  118.     {  
  119.         if(!IsMatch()) return false;//没有匹配返回  
  120.          
  121.          if(event.keyCode==38)//上箭头  
  122.         {  
  123.             if(__moveIndex==-1 || __moveIndex==1)  
  124.             {  
  125.                 mouSEOver($("#sList tr").length);  
  126.             }else  
  127.             {  
  128.                 mouseOver(__moveIndex-1,__moveIndex);  
  129.             }  
  130.         }  
  131.         else if(event.keyCode==40)//下箭头  
  132.         {  
  133.             if(__moveIndex==$("#sList tr").length)  
  134.             {  
  135.                 mouseOver(1,$("#sList tr").length);  
  136.             }else  
  137.             {  
  138.                 if(__moveIndex==-1)  
  139.                 {  
  140.                     mouseOver(1,1);  
  141.                 }else  
  142.                 {  
  143.                     mouseOver(__moveIndex+1,__moveIndex);  
  144.                 }  
  145.             }  
  146.              
  147.         }  
  148.     }  
  149.       
  150.     //提示层mouseover事件  
  151.     function mouseOver()  
  152.     {  
  153.         var obj = null;  
  154.         var n = __moveIndex ;  
  155.         if(n==-1) n=1;  
  156.         var oldObj =$("#sList tr:nth-child("+n+")");  
  157.         if(typeof arguments[0]=="object")  
  158.         {  
  159.             obj = $(arguments[0]);  
  160.         }else  
  161.         {  
  162.             obj = $("#sList tr:nth-child("+arguments[0]+")");  
  163.             oldObj =$("#sList tr:nth-child("+arguments[1]+")");  
  164.         }  
  165.           
  166.         oldObj.css("backgroundColor","#ffffff");  
  167.         oldObj.children().filter(":nth-child(1)").css("color","#000000");  
  168.         oldObj.children().filter(":nth-child(2)").css("color","green");  
  169.           
  170.         obj.css("backgroundColor","#3366CC");  
  171.         obj.children().filter(":nth-child(1)").css("color","#ffffff");  
  172.         obj.children().filter(":nth-child(2)").css("color","#ffffff");  
  173.           
  174.         __moveIndex = obj[0].rowIndex+1;  
  175.     }  
  176.       
  177.     //格式化正整数123,456  
  178.     function RelNumber(num)  
  179.     {  
  180.         var t=num>0?num:Math.abs(num);  
  181.         var str=num.toString();  
  182.         var il = str.length;  
  183.         var n = 1;  
  184.         while(t>1000)  
  185.         {    
  186.             t/=1000;  
  187.             str=str.substring(0,il-n*3)+","+str.substr(il-n*3);  
  188.             ++n;  
  189.         }  
  190.         return str;  
  191.     }  
  192.       
  193.     //取得元素x坐标  
  194.     function pageX(elem)  
  195.     {  
  196.         return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;  
  197.     }  
  198.     //取得元素y坐标  
  199.     function pageY(elem)  
  200.     {  
  201.         return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;  
  202.     }  
  203. // –></mce:script>  
  204. </head>  
  205. <body>  
  206. <form runat="server">  
  207. <asp:TextBox AutoCompleteType="Disabled"  runat="server" ID="TKeyWord" Width="250px" ></asp:TextBox>  
  208. <asp:Button runat="server" ID="Btn_search" Text="Search"  />  
  209. </form>  
  210. </body>  
  211. </html>  

   

后台代码： 

view plaincopy to clipboardprint?
  1. using System;  
  2. using System.Data;  
  3. using System.Configuration;  
  4. using System.Web;  
  5. using System.Web.Security;  
  6. using System.Web.UI;  
  7. using System.Web.UI.WebControls;  
  8. using System.Web.UI.WebControls.WebParts;  
  9. using System.Web.UI.HtmlControls;  
  10. using AjaxPro;  
  11.   
  12. public partial class _Default : System.Web.UI.Page   
  13. {  
  14.     private string NowKey = string.Empty;  
  15.     SHOPBill.SmartSearch.SearchBill sBill = new SHOPBill.SmartSearch.SearchBill();  
  16.   
  17.     protected void Page_Load(object sender, EventArgs e)  
  18.     {  
  19.         Utility.RegisterTypeForAjax(typeof(_Default));  
  20.         if (!IsPostBack)  
  21.         {  
  22.             TKeyWord.Attributes.Add("onkeyup", "matchBase();");  
  23.             TKeyWord.Attributes.Add("onkeydown", "keydown();");  
  24.             Btn_search.Style.Add("cursor", "hand");  
  25.             Btn_search.Attributes.Add("align", "absmiddle");  
  26.             Btn_search.Attributes.Add("onclick", "if($.trim($('#" + TKeyWord.ClientID + "').val())==''){alert('关键字不能为空!',false);return false};document.location.href='" + ResolveClientUrl("~/search/?k=") + "'+encodeURI($('#" + TKeyWord.ClientID + "').val())");  
  27.           
  28.             List<SHOPModule.SmartSearch.SearchItem> list = sBill.SelectKeys();  
  29.             HttpContext.Current.Cache["SEARCHKEYS"] = list;  
  30.         }  
  31.   
  32.     }  
  33.   
  34.   
  35.   
  36.     [AjaxPro.AjaxMethod]  
  37.     public List<SHOPModule.SmartSearch.SearchItem> GetSkeys(string inputKey)  
  38.     {  
  39.         NowKey = inputKey;  
  40.         List<SHOPModule.SmartSearch.SearchItem> list = null;  
  41.         List<SHOPModule.SmartSearch.SearchItem> result = null;  
  42.         if (HttpContext.Current.Cache.Get("SEARCHKEYS") == null)  
  43.         {  
  44.             list = sBill.SelectKeys();  
  45.             HttpContext.Current.Cache["SEARCHKEYS"] = list;  
  46.         }  
  47.         else  
  48.         {  
  49.             list = HttpContext.Current.Cache.Get("SEARCHKEYS") as List<SHOPModule.SmartSearch.SearchItem>;  
  50.         }  
  51.   
  52.         result = list.FindAll(ListMatch);  
  53.         return result;  
  54.     }  
  55.   
  56.     private bool ListMatch(SHOPModule.SmartSearch.SearchItem m)  
  57.     {  
  58.         string k = SHOPCommUtility.Hz2Py.GetWholePinyin(m.colKeyName);  
  59.         return (MatchKeys(NowKey.ToLower(), m.colKeyName.ToLower()) || MatchKeys(NowKey.ToLower(), k.ToLower()));  
  60.   
  61.     }  
  62.   
  63.     private bool MatchKeys(string iKey, string K)  
  64.     {  
  65.         return K.Length >= iKey.Length && K.Substring(0, iKey.Length) == iKey;  
  66.     }  
  67. }  

 

汉字转拼音算法： 

view plaincopy to clipboardprint?
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Text.RegularExpressions;  
  4. using System.Text;  
  5.   
  6. namespace SHOPCommUtility  
  7. {  
  8.     /// <summary>  
  9.     /// 汉字转拼音类  
  10.     /// </summary>  
  11.     public class Hz2Py  
  12.     {  
  13.         private static int[] pyValue = new int[]  
  14.         {  
  15.             -20319,-20317,-20304,-20295,-20292,-20283,-20265,-20257,-20242,-20230,-20051,-20036,  
  16.             -20032,-20026,-20002,-19990,-19986,-19982,-19976,-19805,-19784,-19775,-19774,-19763,  
  17.             -19756,-19751,-19746,-19741,-19739,-19728,-19725,-19715,-19540,-19531,-19525,-19515,  
  18.             -19500,-19484,-19479,-19467,-19289,-19288,-19281,-19275,-19270,-19263,-19261,-19249,  
  19.             -19243,-19242,-19238,-19235,-19227,-19224,-19218,-19212,-19038,-19023,-19018,-19006,  
  20.             -19003,-18996,-18977,-18961,-18952,-18783,-18774,-18773,-18763,-18756,-18741,-18735,  
  21.             -18731,-18722,-18710,-18697,-18696,-18526,-18518,-18501,-18490,-18478,-18463,-18448,  
  22.             -18447,-18446,-18239,-18237,-18231,-18220,-18211,-18201,-18184,-18183, -18181,-18012,  
  23.             -17997,-17988,-17970,-17964,-17961,-17950,-17947,-17931,-17928,-17922,-17759,-17752,  
  24.             -17733,-17730,-17721,-17703,-17701,-17697,-17692,-17683,-17676,-17496,-17487,-17482,  
  25.             -17468,-17454,-17433,-17427,-17417,-17202,-17185,-16983,-16970,-16942,-16915,-16733,  
  26.             -16708,-16706,-16689,-16664,-16657,-16647,-16474,-16470,-16465,-16459,-16452,-16448,  
  27.             -16433,-16429,-16427,-16423,-16419,-16412,-16407,-16403,-16401,-16393,-16220,-16216,  
  28.             -16212,-16205,-16202,-16187,-16180,-16171,-16169,-16158,-16155,-15959,-15958,-15944,  
  29.             -15933,-15920,-15915,-15903,-15889,-15878,-15707,-15701,-15681,-15667,-15661,-15659,  
  30.             -15652,-15640,-15631,-15625,-15454,-15448,-15436,-15435,-15419,-15416,-15408,-15394,  
  31.             -15385,-15377,-15375,-15369,-15363,-15362,-15183,-15180,-15165,-15158,-15153,-15150,  
  32.             -15149,-15144,-15143,-15141,-15140,-15139,-15128,-15121,-15119,-15117,-15110,-15109,  
  33.             -14941,-14937,-14933,-14930,-14929,-14928,-14926,-14922,-14921,-14914,-14908,-14902,  
  34.             -14894,-14889,-14882,-14873,-14871,-14857,-14678,-14674,-14670,-14668,-14663,-14654,  
  35.             -14645,-14630,-14594,-14429,-14407,-14399,-14384,-14379,-14368,-14355,-14353,-14345,  
  36.             -14170,-14159,-14151,-14149,-14145,-14140,-14137,-14135,-14125,-14123,-14122,-14112,  
  37.             -14109,-14099,-14097,-14094,-14092,-14090,-14087,-14083,-13917,-13914,-13910,-13907,  
  38.             -13906,-13905,-13896,-13894,-13878,-13870,-13859,-13847,-13831,-13658,-13611,-13601,  
  39.             -13406,-13404,-13400,-13398,-13395,-13391,-13387,-13383,-13367,-13359,-13356,-13343,  
  40.             -13340,-13329,-13326,-13318,-13147,-13138,-13120,-13107,-13096,-13095,-13091,-13076,  
  41.             -13068,-13063,-13060,-12888,-12875,-12871,-12860,-12858,-12852,-12849,-12838,-12831,  
  42.             -12829,-12812,-12802,-12607,-12597,-12594,-12585,-12556,-12359,-12346,-12320,-12300,  
  43.             -12120,-12099,-12089,-12074,-12067,-12058,-12039,-11867,-11861,-11847,-11831,-11798,  
  44.             -11781,-11604,-11589,-11536,-11358,-11340,-11339,-11324,-11303,-11097,-11077,-11067,  
  45.             -11055,-11052,-11045,-11041,-11038,-11024,-11020,-11019,-11018,-11014,-10838,-10832,  
  46.             -10815,-10800,-10790,-10780,-10764,-10587,-10544,-10533,-10519,-10331,-10329,-10328,  
  47.             -10322,-10315,-10309,-10307,-10296,-10281,-10274,-10270,-10262,-10260,-10256,-10254  
  48.         };  
  49.   
  50.         private static string[] pyName = new string[]  
  51.         {  
  52.             "A","Ai","An","Ang","Ao","Ba","Bai","Ban","Bang","Bao","Bei","Ben",  
  53.             "Beng","Bi","Bian","Biao","Bie","Bin","Bing","Bo","Bu","Ba","Cai","Can",  
  54.             "Cang","Cao","Ce","Ceng","Cha","Chai","Chan","Chang","Chao","Che","Chen","Cheng",  
  55.             "Chi","Chong","Chou","Chu","Chuai","Chuan","Chuang","Chui","Chun","Chuo","Ci","Cong",  
  56.             "Cou","Cu","Cuan","Cui","Cun","Cuo","Da","Dai","Dan","Dang","Dao","De",  
  57.             "Deng","Di","Dian","Diao","Die","Ding","Diu","Dong","Dou","Du","Duan","Dui",  
  58.             "Dun","Duo","E","En","Er","Fa","Fan","Fang","Fei","Fen","Feng","Fo",  
  59.             "Fou","Fu","Ga","Gai","Gan","Gang","Gao","Ge","Gei","Gen","Geng","Gong",  
  60.             "Gou","Gu","Gua","Guai","Guan","Guang","Gui","Gun","Guo","Ha","Hai","Han",  
  61.             "Hang","Hao","He","Hei","Hen","Heng","Hong","Hou","Hu","Hua","Huai","Huan",  
  62.             "Huang","Hui","Hun","Huo","Ji","Jia","Jian","Jiang","Jiao","Jie","Jin","Jing",  
  63.             "Jiong","Jiu","Ju","Juan","Jue","Jun","Ka","Kai","Kan","Kang","Kao","Ke",  
  64.             "Ken","Keng","Kong","Kou","Ku","Kua","Kuai","Kuan","Kuang","Kui","Kun","Kuo",  
  65.             "La","Lai","Lan","Lang","Lao","Le","Lei","Leng","Li","Lia","Lian","Liang",  
  66.             "Liao","Lie","Lin","Ling","Liu","Long","Lou","Lu","Lv","Luan","Lue","Lun",  
  67.             "Luo","Ma","Mai","Man","Mang","Mao","Me","Mei","Men","Meng","Mi","Mian",  
  68.             "Miao","Mie","Min","Ming","Miu","Mo","Mou","Mu","Na","Nai","Nan","Nang",  
  69.             "Nao","Ne","Nei","Nen","Neng","Ni","Nian","Niang","Niao","Nie","Nin","Ning",  
  70.             "Niu","Nong","Nu","Nv","Nuan","Nue","Nuo","O","Ou","Pa","Pai","Pan",  
  71.             "Pang","Pao","Pei","Pen","Peng","Pi","Pian","Piao","Pie","Pin","Ping","Po",  
  72.             "Pu","Qi","Qia","Qian","Qiang","Qiao","Qie","Qin","Qing","Qiong","Qiu","Qu",  
  73.             "Quan","Que","Qun","Ran","Rang","Rao","Re","Ren","Reng","Ri","Rong","Rou",  
  74.             "Ru","Ruan","Rui","Run","Ruo","Sa","Sai","San","Sang","Sao","Se","Sen",  
  75.             "Seng","Sha","Shai","Shan","Shang","Shao","She","Shen","Sheng","Shi","Shou","Shu",  
  76.             "Shua","Shuai","Shuan","Shuang","Shui","Shun","Shuo","Si","Song","Sou","Su","Suan",  
  77.             "Sui","Sun","Suo","Ta","Tai","Tan","Tang","Tao","Te","Teng","Ti","Tian",  
  78.             "Tiao","Tie","Ting","Tong","Tou","Tu","Tuan","Tui","Tun","Tuo","Wa","Wai",  
  79.             "Wan","Wang","Wei","Wen","Weng","Wo","Wu","Xi","Xia","Xian","Xiang","Xiao",  
  80.             "Xie","Xin","Xing","Xiong","Xiu","Xu","Xuan","Xue","Xun","Ya","Yan","Yang",  
  81.             "Yao","Ye","Yi","Yin","Ying","Yo","Yong","You","Yu","Yuan","Yue","Yun",  
  82.             "Za", "Zai","Zan","Zang","Zao","Ze","Zei","Zen","Zeng","Zha","Zhai","Zhan",  
  83.             "Zhang","Zhao","Zhe","Zhen","Zheng","Zhi","Zhong","Zhou","Zhu","Zhua","Zhuai","Zhuan",  
  84.             "Zhuang","Zhui","Zhun","Zhuo","Zi","Zong","Zou","Zu","Zuan","Zui","Zun","Zuo"  
  85.         };  
  86.   
  87.         /// <summary>  
  88.         /// 把汉字转换成拼音(全拼)  
  89.         /// </summary>  
  90.         /// <param name="hzString">汉字字符串</param>  
  91.         /// <returns>转换后的拼音(全拼)字符串</returns>  
  92.         public static string GetWholePinyin(string hzString)  
  93.         {  
  94.             // 匹配中文字符  
  95.             Regex regex = new Regex("^[\u4e00-\u9fa5]$");  
  96.             byte[] array = new byte[2];  
  97.             string pyString = "";  
  98.             int chrAsc = 0;  
  99.             int i1 = 0;  
  100.             int i2 = 0;  
  101.             char[] noWChar = hzString.ToCharArray();  
  102.   
  103.             for (int j = 0; j < noWChar.Length; j++)  
  104.             {  
  105.                 // 中文字符  
  106.                 if (regex.IsMatch(noWChar[j].ToString()))  
  107.                 {  
  108.                     array = System.Text.Encoding.Default.GetBytes(noWChar[j].ToString());  
  109.                     i1 = (short)(array[0]);  
  110.                     i2 = (short)(array[1]);  
  111.                     chrAsc = i1 * 256 + i2 – 65536;  
  112.                     if (chrAsc > 0 && chrAsc < 160)  
  113.                     {  
  114.                         pyString += noWChar[j];  
  115.                     }  
  116.                     else  
  117.                     {  
  118.                         // 修正部分文字  
  119.                         if (chrAsc == -9254)  // 修正"圳"字  
  120.                             pyString += "Zhen";  
  121.                         else  
  122.                         {  
  123.                             for (int i = (pyValue.Length – 1); i >= 0; i–)  
  124.                             {  
  125.                                 if (pyValue[i] <= chrAsc)  
  126.                                 {  
  127.                                     pyString += pyName[i];  
  128.                                     break;  
  129.                                 }  
  130.                             }  
  131.                         }  
  132.                     }  
  133.                 }  
  134.                 // 非中文字符  
  135.                 else  
  136.                 {  
  137.                     pyString += noWChar[j].ToString();  
  138.                 }  
  139.             }  
  140.             return pyString;  
  141.         }  
  142.     }  
  143. }  

 

 

赞(0) 打赏
分享到： 更多 (0)

相关推荐

热门标签

C# (813)ASP.NET MVC (619)Android (587)ASP.NET (447)数据库 (299)JavaScript (285)JQuery (221)PHP (210)SQLServer (197)程序开发 (156)架构设计 (155)源价值 (155)SQL (128)Java (111)EasyUi (85)教程 (76)网站 (67)Debug (63)互联网 (63)MySQL (60)Flash (56)搜索优化 (54)创意 (53)SEO (51)ASP.NET MVC3 (51)电子商务 (50)建站经验 (49)实例代码 (49)源码下载 (47)原创 (45)

分类

链接表

<figure class="wp-block-image size-full"><a href="https://act.walk-live.com/acts/invite/registration?inviteid=hkXrmnvL" target="_blank"><img src="https://www.mikel.cn/wp-content/uploads/2024/11/wangxinyun.jpg"></a></figure>

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏