利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)
2017-10-27 14:55
1101 查看
实现功能描述:
1、实现搜索框的智能提示
2、第二次浏览器缓存结果
3、实现仿百度搜索
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.8.3.min.js"></script> <script src="jsPlugin/autocomplete/jquery.autocomplete.js"></script> <style> * { margin: 0px; padding: 0px; } #wrapper { height: 100%; padding-top: 100px; } .s-skin-container { position: fixed; _position: absolute; top: 0; left: 0; height: 100%; width: 100%; min-width: 1000px; z-index: -10; background-position: center 0; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; zoom: 1; } .s-form { width: 700px; height: 100%; min-height: 293px; margin: 0 auto 0 auto; text-align: left; z-index: 100; } form { margin: 8px 0 0 25px; } input { outline: none; } #s_kw_wrap { display: inline-block; zoom: 1; vertical-align: top; width: 500px; } #kw { width: 488px; padding: 10px 9px 10px 7px; border: 0; background-image: none; height: 20px; line-height: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .s_btn_wr { display: inline-block; zoom: 1; vertical-align: top; width: 102px; height: 38px; border: 1px solid #38f; border-bottom: 1px solid #2e7ae5; background-color: #38f; } .btn { cursor: pointer; width: 102px; height: 38px; line-height: 38px; padding: 0; border: 0; background: none; background-color: #38f; font-size: 16px; color: white; box-shadow: none; font-weight: normal; } .btn:hover { height: 39px; _height: 38px; background-color: #317ef3; border-bottom: 1px solid #2868c8; box-shadow: 1px 1px 1px #ccc; } /*选择提示项*/ .autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ccc; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } .autocomplete-no-suggestion { padding: 2px 5px; } .autocomplete-selected { background: #F0F0F0; } .autocomplete-suggestions strong { font-weight: bold; color: #ff6a00; } .autocomplete-group { padding: 2px 5px; } .autocomplete-group strong { font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; } </style> </head> <body> <div id="wrapper"> <div class="s-skin-container" style="background-image: url(https://ss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/5.jpg);"></div> <div class="s-form"> <form action="#"> <span id="s_kw_wrap"> <input type="text" id="kw" maxlength="100" autocomplete="off" /> </span> <span class=" s_btn_wr"> <input type="submit" value="搜索一下" class="btn" /> </span> </form> </div> </div> <script> $(function () { $("#kw").focus(); $("#kw").autocomplete({ ajaxSettings: { url: "/ajax/autoHandler.ashx" } }) }) </script> </body> </html>
后端代码
/// <summary> /// 提供搜索数据 /// </summary> public class autoHandler : IHttpHandler, IRequiresSessionState { public HttpRequest Request { get { return HttpContext.Current.Request; } } public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; string query = Request["query"]; object data = null; if (!string.IsNullOrEmpty(query)) { List<AutoKeyWordEntity> list = GetSearchList(query); data = list; } var newData = new { suggestions = data }; string jsonData = JsonConvert.SerializeObject(newData); context.Response.Write(jsonData); } private List<AutoKeyWordEntity> GetSearchList(string query) { List<AutoKeyWordEntity> list = new List<AutoKeyWordEntity>(); if (query.Contains("百") || query.Contains("b")) { list.Add(new AutoKeyWordEntity() { value = "百度" }); list.Add(new AutoKeyWordEntity() { value = "b百度" }); } else if (query.Contains("360") || query.Contains("3") || query.Contains("6")) { list.Add(new AutoKeyWordEntity() { value = "360" }); list.Add(new AutoKeyWordEntity() { value = "3" }); list.Add(new AutoKeyWordEntity() { value = "360搜索" }); } else if (query.Contains("神")) { list.Add(new AutoKeyWordEntity() { value = "神马搜索" }); } else if (query.Contains("1")) { list.Add(new AutoKeyWordEntity() { value = "1一个人" }); } else { list.Add(new AutoKeyWordEntity() { value = "我的网" }); } return list; } public class AutoKeyWordEntity { public string value { get; set; } } public bool IsReusable { get { return true; } } }
效果:
下载地址 http://www.jq22.com/jquery-info12967
相关文章推荐
- ajax实现百度搜索输入动态获取数据
- jquery.bigautocomplete.js首次获取焦点触发搜索(类似百度首次的搜索历史)
- AngularJS+Echarts利用Ajax实现数据动态刷新
- 利用js将ajax获取到的后台数据动态加载至网页中
- jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文
- 利用ajax技术从后端获取数据来制作留言本类瀑布流效果
- 原生js如何实现柱状图以及原生js柱状图结合ajax循环动态数据_JavaScript_柱状图(原生JavaScript做的柱状图)(03)_ajax获取数据
- 利用sender的Parent获取GridView中的当前行 不用AJAX实现前台JS调用后台C#方法(小技巧) AjaxControlToolkit的CalendarExtender的本地化
- js实现手机端可以上拉刷新,动态通过ajax从后台获取数据
- JS-利用ajax获取json数据,并传入页面生成动态tab
- 利用js将ajax获取到的后台数据动态加载至网页中的方法
- 利用js将ajax获取到的后台数据动态加载至网页中
- JQuery+JS实现仿百度搜索结果中关键字变色效果
- 34.6.1 Excel数据有效性的高级应用【动态二级级联菜单/如百度输入框Ajax效果的下拉菜单/圈出无效数据】
- 用table,js实现web动态取数据并实现分页效果
- 利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
- .NET中使用js实现百度搜索下拉提示效果[不是局部刷新,呜呜。。]
- .NET中使用js实现百度搜索下拉提示效果[不是局部刷新,呜呜。。]
- AJAX中利用AutoCompleteExtender实现类似于谷歌的智能提示(利用Access数据库)
- 利用css和js实现页面的标签效果。(标签个数可以动态变化)