ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）...

实现功能描述：

1、实现搜索框的智能提示

2、第二次浏览器缓存结果

3、实现仿百度搜索

* { 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; }

$(function () {

$("#kw").focus();

$("#kw").autocomplete({

ajaxSettings: { url: "/ajax/autoHandler.ashx" }

})

})

后端代码

///

/// 提供搜索数据

///

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 list = GetSearchList(query);

data = list;

}

var newData = new { suggestions = data };

string jsonData = JsonConvert.SerializeObject(newData);

context.Response.Write(jsonData);

}

private List GetSearchList(string query)

{

List list = new List();

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)

百度搜索

< ...

点滴积累【JS】---JS实现仿百度模糊搜索效果

效果: HTML代码:

百度搜索效果(jsonp法)

百度搜索效果(jsonp法): 不需要放在服务器中,本地就可以执行

vue-resource使用 &lpar;vue仿百度搜索&rpar;

1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...

Springboot&plus;Vue实现仿百度搜索自动提示框匹配查询功能

案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

js搜索框 js仿百度搜索 js下拉框 jQuery&period;Autocomplete使用

做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...

使用Jquery UI 高仿百度搜索下拉列表功能

最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果: 实现这个功能,直接使用了JQuery UI 插件 目前我使用的实现版本是: 网友可以 ...

利用tween&period;js算法生成缓动效果

在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

利用referer属性，记录百度搜索跳转参数

从百度搜索结果跳转到指定链接前,百度会发送一些参数,可以利用referer属性,在本站访问时记录百度跳转来之前的一些参数. 利用百度跳转前参数,进行一些相关的seo优化. 目前所用到的一些参数说明如下 ...

随机推荐

UWP开发必备以及常用知识点总结

一直在学UWP,一直在写Code,自己到达了什么水平?还有多少东西需要学习才能独挡一面?我想对刚接触UWP的开发者都有这种困惑,偶尔停下来总结分析一下还是很有收获的! 以下内容是自己开发中经常遇到的一 ...

Deploying an Internet Information Services-Hosted WCF Service

Deploying an Internet Information Services-Hosted WCF Service .NET Framework 4   Other Versions .NET ...

在centos6&period;5-64bit上安装wxHexEditor，以查看编译二进制文件

目前在做一个存储,磁盘里面的数据老是出现很诡异的地方,某个通道的录像播放到一半的时候,切换到另外一个通道的视频上去了,一直不知道怎么下手,想着用十六进制编辑器查看磁盘数据. sudo yum inst ...

Java：抽象类abstract和接口Interface

一.抽象类:abstract 抽象类就是为了继承而存在的,如果你定义了一个抽象类,却不去继承它,那么等于白白创建了这个抽象类,因为你不能用它来做任何事情.对于一个父类,如果它的某个方法在父类中实现出来 ...

Appium for Windows环境搭建

服务环境: 1.安装Nodejs 下载nodejs安装包(http://nodejs.org/download/)安装 测试安装是否成功:运行cmd,输入node -v 2.安装android的SKD ...

php获取汉字拼音首字母的方法

现实中我们经常看到这样的说明,排名不分先后,按姓名首字母进行排序.这是中国人大多数使用的排序方法.那么在php程序中该如何操作呢? 下面就分享一下在php程序中获取汉字拼音的首字母的方法,在网上搜到的 ...

javascript之彻底理解valueOf&comma; toString

参与运算的都是简单类型(一般就字符串和数字), 复杂类型是不参与运算的. ***当对象(非简单类型)用作键时,会先调用toString()方法把对象转化成字符串 var a = {},     b = ...

CRC文件解压缩问题

CRC问题一般有三种可能1.你的硬盘出现坏道2.你的硬盘数据线受损3.还可能是主板和内存的问题 硬盘坏道的表现硬盘使用久了就可能出现各种各样的问题,而硬盘“坏道”便是这其中最常见的问题.硬盘出现坏道除 ...

【linux】在ubuntu中使用apt-get安装oracle jdk6

在Ubuntu 12.04 LTS上安装JDK6本身并不复杂,只是目前较新版本的Ubuntu已经不支持直接通过apt-get安装了.因此,需要从Oracle官方网站下载安装包进行安装. 从Oracle ...