利用autocomplete.js实现仿搜索效果(ajax动态获取后端[C#]数据)
时间:2022-05-04
本文章向大家介绍利用autocomplete.js实现仿搜索效果(ajax动态获取后端[C#]数据),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
实现功能描述:
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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用Webrtc和React Js在网络上共享跨平台的点对点文件
- JSBridge小科普
- Greenplum编译安装
- 宏任务和微任务到底是什么?
- React中的setState是异步的吗?
- java安全编码指南之:堆污染Heap pollution
- ECMAScript6基础学习教程(五)对象
- React入门系列(三)创建组件
- prometheus学习笔记(2)-利用java client写入数据
- Vue入门系列(一)Vue技术栈
- Openwrt智能路由系统开发--内容总结
- 干爆红队-爆破CS Teamserver 密码
- 使用Golang免杀Tips
- centos7卸载自带jdk并安装新的jdk
- 即使不懂单元测试,会用这个工具也够了~