jQuery ajax仿谷歌自动提示搜索建议功能示例

本文实例讲述了jQuery ajax仿谷歌自动提示搜索建议功能。分享给大家供大家参考，具体如下：

页面：

% @ Page Language=' c# ' AutoEventWireup=' true ' CodeFile=' Default。aspx。cs ' Inherits=' _ Default ' %！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title seach/script type=' text/JavaScript ' src=' http 3360 jquery。量滴js '/脚本脚本类型ulli类=' h _ 14 ' iframe style=' display : none ' id=' if _ key up ' name=' if _ key up '/iframe input id=' kw ' name=' kw ' class=' h _ 15 ' on key up=' key up(event)' autocomplete=' off '/div style=' display : none ' id=' key up _ d ' class=' sokey up '/div/Lili class=' h _ 16 '输入样式=' cursor 3330 src=' http : search butom。 gif ' type=' image '/Li/ul/div/form/body/html CSS部分：

UL { padd : 0px；列表样式-类型：无；余量： 0px列表样式-图像：无；height : 52px } LI { PADDING-bottom : 0px；列表样式-类型：无；MARGIN:添加-左侧： 0pxPADDING-right : 0px；列表样式-图像：无；填充-TOP: 0px} .h _ 14 { BACKGROUND-image : URL(text _ search。jpg)；文本-左侧对齐：PADDING-bottom : 1 px；线高：26px；MARGIN-TOP: 3px；PADDING-左侧： 4px宽度： 245像素；背景-重复：不重复；背景-位置：中心50%;左侧浮动：height : 26pxMARGIN-左侧： 3px垂直-中间对齐：隐藏飞越：MARGIN-right : 3px；填充-TOP: 2px} .h _ 15 { BOrder-bottom : 0px；边框-左侧left : 0px add-bottom : 0px；线高：20px；PADDING-左侧： 0px宽度： 240像素；PADDING-right : 0px；显示器：块；左侧浮动：height : 20pxMARGIN-左侧： 0pxFONT-SiZe : 14px；垂直-中间对齐：边框-TOP : 0px；BORDER-right : 0px；衬垫-TOP: 4px} .h _ 16 {宽度： 57px左侧浮动：HEIGHT: 32px隐藏飞越：CURSOR:指针}。sokeyup { Z-index : 10000；边框-底部： #000000 1px实心；绝对位置：边框-左侧： #000000 1px实心；宽度： 245像素；显示器：无；CLEAR:两者；隐藏飞越：边框-顶部： #000000 1px固体；边框-右侧： #000000 1px实心}。sokeyup _ 1 { LINE-height : 20px；PADDING-左侧： 4px宽度： 237像素；PADDING-right : 4px；高： 20pxCLEAR:两者；飞越：隐藏}。sokeyup _ 2 { LINE-height : 20px；宽度： 140像素；左侧浮动：height : 20pxcolor : # 4c 4c 4 } .sokeyup_3 { TEXT-ALIGN:右侧；线高：20px；宽度： 97px右侧浮子：height : 20pxcolor : # 008000 } .sokeyup _ 4 { LINE-height : 20px；宽度： 237像素；HEIGHT: 20px} .sokeyup _ 5 { LINE-height : 20px；右侧浮子：height : 20pxcolor : # 0000 cccursor :指针；文本装饰：下划线}js部分：

函数so_search(){var kw=$('#kw ').val()；var kid=0；var kname=$('#select_kid ').html()；kw=encodeURI(千瓦);if(kw==''){alert('请输入要查找的关键词');} else { location。href=' search-' rel='外部不跟随' rel='外部不跟随' kw ' .html '；}}//关闭搜索提示函数keyup_close(){$('#keyup_d ').hide()；}//功能键up _ over(id){ $("# u _"id).css(“”背景色，' # 0000 cc ')；$("# l _"id).css('color '，' # fff ')；}功能键up _ out(id){ $("# u _"id).css(“”背景色，' # fff ')；$("# l _"id).css('color '，' # 000 ')；}函数keyup_click(id){$('#keyup_d ').hide()；var kw=$('#l_' id).html()；kw=encodeURI(千瓦);位置。href=' search-' rel='外部不跟随' rel='外部不跟随' kw ' .html '；}功能键up(事件){ if(窗口。事件){ var key=window。事件。密钥代码；} else { var key=event . what } if(key！=38key！=40key！=13){var kw=$('#kw ').val()；//跨域获取搜索提示var url='JsonHandler.ashx？kw=' encodeURI(kw)'时间='新日期()。toString()；//中文$.获取(网址，函数（数据){if(数据！='') {$('#keyup_d ').html(data ' ul class=' sokeyup _ 4 ' Li id=' l _ 0 ' style=' display : none；/Lili class=' sokeyup _ 5 ' onclick=' keyup _ close()'关闭/Li/ul '；$('#keyup_d ').show()；} else {$('#keyup_d ').hide()；}});} } var ul _ id=0；$(窗口)。按键(功能(事件){ if(窗口。事件){ var key=window。事件。密钥代码；} else { var key=event . what } if(key==13){ if(search focus==true){ } } var ulcount=$(' # key up _ d ul ').size()-1；if($('#keyup_d ').css('display')=='block'){//向上$('#l_0 ').html($('#kw ').val())；if(key==13) {if ($('#kw ').val()！=' '){ so _ search()；} } if(key==38){ ul _ id-；if(ul _ id0){ ul _ id=ul计数；按键up _ over(ul _ id)；} else { key up _ out(ul _ id 1)；按键up _ over(ul _ id)；}$('#kw ').val($("# l _"ul _ id).html())；返回false}//向下if (key==40 ) {$('#l_0 ').html($('#kw ').val())；ul _ idif(ul _ idulcount){ ul _ id=0；keyup _ out(ulcount)；} else { key up _ out(ul _ id-1)；按键up _ over(ul _ id)；}$('#kw ').val($("# l _"ul _ id).html())；返回false } } })；处理程序部分：

%@ WebHandler语言=' c# ' Class=' JsonHandler ' %使用系统使用系统网络.使用系统数据。程序使用系统。数据；公共类JsonHandler : IHttpHandler { public void process request(HttpContext context){ context } .响应。内容类型='文本/纯文本；字符串键=上下文。请求[' kw ']；如果（关键！=nullKey！=' '){ SqlConnection con=new SqlConnection(' server=JUQI；数据库=NorthWinDuid=sapwd=sa ')；con . Open()；字符串字符串='选择明显的关键字，搜索中的编号，其中关键字如@ kw按关键字排序'；SqlCommand com=new SqlCommand(str，con)；com .参数。添加(' @kw '，SqlDbType .NVarChar ).值="%"键"%";SqlDataReader sdr=com .ExecuteReader()；字符串html str=int I=1；同时(特别提款权.read()){ string kword=SDR['关键字'].ToString()；字符串a=sdr['num'].ToString()；html str=' ul class=' sokeyup _ 1 ' onmouseover=' keyup _ over(' I ')' onmouseout=' keyup _ out(' I ')' onclick=' keyup _ click(' I ')' id=' u _ ' I '；html str=' Li class=' sokeyup _ 2 ' id=' l _ ' I ' ' ' kword '/Li '；htmlstr='li class='sokeyup_3'' a '结果/Li/ul '；我；}上下文回应。Write(html字符串)；语境。响应。end()；特别提款权.close()；con . Close()；} } public bool IsReuse { get { return false；}}}SQL部分：

更改程序[dbo].[建议_搜索]@kw VARCHAR(100)，@ cityid intasbeginSELECT选择来自dbo的前10名* .搜索索引[电子邮件受保护]和关键字像“@”千瓦“%”联合所有选择前10名*从dbo .搜索索引其中cityid=@cityid和拼音比如“% @ kw %”按搜索次数排序一定要建组合索引……

定义变量结果=列表orderbydecoding(t=t .搜索次数).选择(t=t.keyword.Replace('、')).取(10);字符串json=JsonConvert .序列化对象（结果，格式。缩进);string renderJSON='KISSY .建议。回调({'result':' json .替换("\"、"\")"})";更多关于框架相关内容感兴趣的读者可查看本站专题： 《jquery中Ajax用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。