经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » AJAX » 查看文章
jQuery ajax仿Google自动提示SearchSuggess功能示例
来源：jb51　　时间：2019/3/28 11:43:23　　对本文有异议

本文实例讲述了jQuery ajax仿Google自动提示SearchSuggess功能。分享给大家供大家参考，具体如下：

页面：

  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 runat="server">
  5. <title>seach</title>
  6. <script type="text/javascript" src="jquery.min.js" ></script>
  7. <script type="text/javascript" src="js.js"></script>
  8. <link href="css.css" rel="external nofollow" rel="stylesheet" type="text/css" />
  9. </head>
  10. <body>
  11. <form id="form1" runat="server">
  12. <div onClick="keyup_close();">
  13. <ul>
  14. <li class="h_14">
  15. <iframe style="DISPLAY: none" id="if_keyup" name="if_keyup"></iframe>
  16. <input id="kw" name="kw" class="h_15" onKeyUp="keyup(event)" autocomplete="off" />
  17. <div style="DISPLAY: none" id="keyup_d" class="sokeyup" ></div>
  18. </li>
  19. <li class="h_16">
  20. <input style="CURSOR: pointer" onClick="so_search();" src="searchbuttom.gif" type="image" />
  21. </li>
  22. </ul>
  23. </div>
  24. </form>
  25. </body>
  26. </html>
  27.  

css部分:

  1. UL { padding: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; LIST-STYLE-IMAGE: none; height: 52px; }
  2. LI { PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px}
  3. .h_14 { BACKGROUND-IMAGE: url(text_search.jpg); TEXT-ALIGN: left; PADDING-BOTTOM: 1px; LINE-HEIGHT: 26px; MARGIN-TOP: 3px; PADDING-LEFT: 4px; WIDTH: 245px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center 50%; FLOAT: left; HEIGHT: 26px; MARGIN-LEFT: 3px; VERTICAL-ALIGN: middle; OVERFLOW: hidden; MARGIN-RIGHT: 3px; PADDING-TOP: 2px}
  4. .h_15 { BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 20px; PADDING-LEFT: 0px; WIDTH: 240px; PADDING-RIGHT: 0px; DISPLAY: block; FLOAT: left; HEIGHT: 20px; MARGIN-LEFT: 0px; FONT-SIZE: 14px; VERTICAL-ALIGN: middle; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 4px}
  5. .h_16 { WIDTH: 57px; FLOAT: left; HEIGHT: 32px; OVERFLOW: hidden; CURSOR: pointer}
  6. .sokeyup { Z-INDEX: 10000; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; BORDER-LEFT: #000000 1px solid; WIDTH: 245px; DISPLAY: none; CLEAR: both; OVERFLOW: hidden; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid}
  7. .sokeyup_1 { LINE-HEIGHT: 20px; PADDING-LEFT: 4px; WIDTH: 237px; PADDING-RIGHT: 4px; HEIGHT: 20px; CLEAR: both; OVERFLOW: hidden}
  8. .sokeyup_2 { LINE-HEIGHT: 20px; WIDTH: 140px; FLOAT: left; HEIGHT: 20px; COLOR: #4c4c4c}
  9. .sokeyup_3 { TEXT-ALIGN: right; LINE-HEIGHT: 20px; WIDTH: 97px; FLOAT: right; HEIGHT: 20px; COLOR: #008000}
  10. .sokeyup_4 { LINE-HEIGHT: 20px; WIDTH: 237px; HEIGHT: 20px
  11. }
  12. .sokeyup_5 { LINE-HEIGHT: 20px; FLOAT: right; HEIGHT: 20px; COLOR: #0000cc; CURSOR: pointer; TEXT-DECORATION: underline}
  13.  

js部分:

  1. function so_search(){
  2. var kw = $("#kw").val();
  3. var kid = 0;
  4. var kname=$("#select_kid").html();
  5. kw = encodeURI(kw);
  6. if(kw == ''){
  7. alert("请输入要查找的关键词");
  8. }else{
  9. location.href="search-" rel="external nofollow" rel="external nofollow" +kw+".html";
  10. }
  11. }
  12. //关闭搜索提示
  13. function keyup_close(){
  14. $("#keyup_d").hide();
  15. }
  16. //
  17. function keyup_over(id){
  18. $("#u_"+id).css("background-color","#0000CC");
  19. $("#l_"+id).css("color","#fff");
  20. }
  21. function keyup_out(id){
  22. $("#u_"+id).css("background-color","#fff");
  23. $("#l_"+id).css("color","#000");
  24. }
  25. function keyup_click(id){
  26. $("#keyup_d").hide();
  27. var kw=$("#l_"+id).html();
  28. kw = encodeURI(kw);
  29. location.href="search-" rel="external nofollow" rel="external nofollow" +kw+".html";
  30. }
  31. function keyup(event){
  32. if(window.event){
  33. var key =window.event.keyCode;
  34. }else{
  35. var key =event.which;
  36. }
  37. if(key!=38&&key!=40&&key!=13){
  38. var kw=$("#kw").val();
  39. //跨域获取搜索提示
  40. var url ="JsonHandler.ashx?kw=" + encodeURI(kw) + "&time=" + new Date().toString();//中文
  41. $.get(url,function(data){
  42. if (data!='') {
  43. $("#keyup_d").html(data+'<ul class="sokeyup_4"><li id="l_0" style="display:none;"></li><li class="sokeyup_5" onclick="keyup_close()">关闭</li></ul>');
  44. $("#keyup_d").show();
  45. } else {
  46. $("#keyup_d").hide();
  47. }
  48. }
  49. );
  50. }
  51. }
  52. var ul_id=0;
  53. $(window).keydown(function(event){
  54. if(window.event){
  55. var key =window.event.keyCode;
  56. }else{
  57. var key =event.which;
  58. }
  59. if (key==13) {
  60. if (searchFocus == true) {
  61. }
  62. }
  63. var ulcount=$("#keyup_d ul").size()-1;
  64. if($("#keyup_d").css("display")=="block"){
  65. //向上
  66. $("#l_0").html($("#kw").val());
  67. if(key==13) {
  68. if ($("#kw").val()!= "") {
  69. so_search();
  70. }
  71. }
  72. if (key==38) {
  73. ul_id--;
  74. if(ul_id<0){
  75. ul_id = ulcount;
  76. keyup_over(ul_id);
  77. }else{
  78. keyup_out(ul_id+1);
  79. keyup_over(ul_id);
  80. }
  81. $("#kw").val($("#l_"+ul_id).html());
  82. return false;
  83. }
  84. //向下
  85. if (key==40 ) {
  86. $("#l_0").html($("#kw").val());
  87. ul_id++;
  88. if(ul_id>ulcount){
  89. ul_id=0;
  90. keyup_out(ulcount);
  91. }else{
  92. keyup_out(ul_id-1);
  93. keyup_over(ul_id);
  94. }
  95. $("#kw").val($("#l_"+ul_id).html());
  96. return false;
  97. }
  98. }
  99. });
  100.  

ashx部分:

  1. <%@ WebHandler Language="C#" Class="JsonHandler" %>
  2. using System;
  3. using System.Web;
  4. using System.Data.SqlClient;
  5. using System.Data;
  6. public class JsonHandler : IHttpHandler {
  7. public void ProcessRequest(HttpContext context)
  8. {
  9. context.Response.ContentType = "text/plain";
  10. string Key = context.Request["kw"];
  11. if (Key !=null&&Key!="")
  12. {
  13. SqlConnection con = new SqlConnection("server=JUQI;database=NorthWind;uid=sa;pwd=sa;");
  14. con.Open();
  15. string str = "select distinct keyword,num from search where keyword like @kw order by keyword";
  16. SqlCommand com = new SqlCommand(str, con);
  17. com.Parameters.Add("@kw", SqlDbType.NVarChar).Value = "%"+ Key + "%";
  18. SqlDataReader sdr = com.ExecuteReader();
  19. string htmlstr = "";
  20. int i = 1;
  21. while (sdr.Read())
  22. {
  23. string kword = sdr["keyword"].ToString();
  24. string a = sdr["num"].ToString();
  25. htmlstr += "<ul class='sokeyup_1' onmouseover='keyup_over(" + i + ")' onmouseout='keyup_out(" + i + ")' onclick='keyup_click(" + i + ")' id='u_" + i + "'>";
  26. htmlstr += "<li class='sokeyup_2' id='l_" + i + "'>" + kword + "</li>";
  27. htmlstr += "<li class='sokeyup_3'>" + a + " 结果</li></ul>";
  28. i++;
  29. }
  30. context.Response.Write(htmlstr);
  31. context.Response.End();
  32. sdr.Close();
  33. con.Close();
  34. }
  35. }
  36. public bool IsReusable {
  37. get {
  38. return false;
  39. }
  40. }
  41. }
  42.  

SQL部分:

  1. ALTER PROCEDURE [dbo].[suggest_search]
  2. @kw VARCHAR(100) ,@cityid int
  3. as
  4. begin
  5. SELECT TOP 10 * FROM  dbo.SearchIndex WHERE cityid=@cityid and keyword LIKE '' + @kw + '%'
  6. UNION ALL
  7. SELECT TOP 10 * FROM  dbo.SearchIndex WHERE cityid= @cityid and pinyin LIKE '' + @kw + '%'
  8. ORDER BY searchtimes DESC
  9. END

--一定要建组合索引……

  1. var result = list.OrderByDescending(t => t.searchtimes).Select(t => t.keyword.Replace("'", "")).Take(10);
  2. string json = JsonConvert.SerializeObject(result, Formatting.Indented);
  3. string renderJSON = "KISSY.Suggest.callback({'result':" + json.Replace("\"", "\'") + "})";
  4.  

更多关于jQuery相关内容感兴趣的读者可查看jb51专题：《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

AJAX热门文章

  • ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器
  • PHP使用ajax的post方式下载excel文件简单示例
  • 解决Shiro 处理ajax请求拦截登录超时的问题
  • PHP+iframe模拟Ajax上传文件功能示例
  • Ajax返回值类型与用法实例分析
  • Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递
  • Ajax提交post请求案例分析
  • php ajax confirm 删除实例详解
  • 爬取今日头条Ajax请求
  • Ajax原理与应用案例快速入门教程

    • AJAX推荐文章

  • 前后端分离之Ajax入门
  • ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器
  • Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递
  • AJAX请求以及解决跨域问题详解
  • Ajax实现省市县三级联动
  • jQuery ajax仿Google自动提示SearchSuggess功能示例

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号