jq实现搜索引擎的提示效果
(function ($) {
$.fn.Search = function (options) {
var defaults = {
inputid: "search",
divid: "searchDiv",
callback: function (pageindex) {
} }; var i = 0;
var opts = $.extend(defaults, options); $("#" + opts.inputid).keyup(function (e) {
e = e || window.event;
if (e.keyCode != 40 && e.keyCode != 38 && e.keyCode != 13) {
if ($("#" + opts.inputid).val() == "") {
$("#" + opts.divid).hide();
i = 0;
} else {
var value = $("#" + opts.inputid).val();
$.ajax({
//提交方式为Get
type: "get",
//访问的handler地址 参数d=" + new Date()是为了防止缓存是他每次访问的参数不同
url: "/Common/SearchInfo", //设置提交的参数
data: { name: value },
//提交的方式是json提交
dataType: "json",
//如果成功则得到返回的结果然后用javascript库中的each方法遍历返回的json集合
success: function (data) {
//用each遍历json集合
if (data != null) {
var html = "";
$.each(data, function (i, dataitem) {
html = html + "<div style='cursor:hand' id='div" + i + "' onmouseover='getBlue(this)'onmouseout='getWhite(this)' onclick='document.getElementById(\"search\").value = this.innerText;$(\"#" + opts.divid + "\").hide();i=0;'style='font-size:16px;padding-top:5px;padding-buttom:5px;'><span style='font-weight:bold'>" + dataitem.ComName.substring(0, value.length) + "</span><span>" + dataitem.ComName.substring(value.length, dataitem.ComName.length) + "</span></div>";
});
$("#" + opts.divid).html(html);
$("#" + opts.divid).show();
} else {
$("#" + opts.divid).html("");
$("#" + opts.divid).hide();
}
},
//如果失败的话则弹出错误提醒
error: function (data) {
$("#" + opts.divid).hide();
i = 0;
}
});
}
} if (e.keyCode == 40) {
var divs = $("#" + opts.divid).find("div");
if (divs.length == 1) {
divs[0].style.backgroundColor = "#e8e3e3";
return;
}
if ($.trim(i) == $.trim(divs.length)) {
divs[0].style.backgroundColor = "#e8e3e3";
$("#" + divs[0].id).siblings().css("backgroundColor", "white");
i = 0;
} else {
divs[i].style.backgroundColor = "#e8e3e3";
$("#" + divs[i].id).siblings().css("backgroundColor", "white");
}
i = i + 1;
}
if (e.keyCode == 38) {
var divs = $("#" + opts.divid).find("div");
if (i == 0) {
i = divs.length;
}
if (divs.length == 1) {
divs[0].style.backgroundColor = "#e8e3e3";
return;
}
if ($.trim(i) >= 0) {
divs[i - 1].style.backgroundColor = "#e8e3e3";
$("#" + divs[i - 1].id).siblings().css("backgroundColor", "white");
} else {
divs[i - 1].style.backgroundColor = "#e8e3e3";
$("#" + divs[i - 1].id).siblings().css("backgroundColor", "white");
i = 0;
}
i = i - 1;
}
if (e.keyCode == 13) {
var divs = $("#" + opts.divid).find("div");
for (var j = 0; j < divs.length; j++) {
if (divs[j].style.backgroundColor == "rgb(232, 227, 227)") {
var span = $("#" + divs[j].id).find("span");
var spanText = span[0].innerText + span[1].innerText;
$("#" + opts.inputid).val(spanText);
$("#" + opts.divid).hide();
i = 0;
}
}
}
});
}; })(jQuery);
function getBlue(obj) {
obj.style.backgroundColor = "#e8e3e3";
}
function getWhite(obj) {
obj.style.backgroundColor = "white";
}
jq实现搜索引擎的提示效果的更多相关文章
- 搜索引擎的提示效果完整的JavaScript代码
function divShow() { <%--判断输入的是否为空 如果为空则隐藏div 如果不为空则显示div --%> if ($("#tbxSearchKeywords& ...
- [锋利的JQ]-超链接提示效果
关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...
- 炫!一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- Fort.js – 时尚、现代的表单填写进度提示效果
Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...
- SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...
- Ladda – 把加载提示效果集成到按钮中,提升用户体验
Ladda 是一组集成了加载提示的按钮,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验.主要用于在用户点击提交之后,向用户提供即时的反馈,让他们知道浏览器正在处用户提交的任务. 您可能感兴趣的 ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- iOS开发——UI篇&提示效果
提示效果 关于iOS开发提示效果是一个很常见的技术,比如我们平时点击一个按钮,实现回馈,或者发送网络请求的时候! 技术点: 一:View UIAlertView UIActionSheet 二:控制器 ...
- js简单实现删除记录时的提示效果
删除记录时的提示效果,挺人性化的,实现的方法有很多,在本文为大家介绍下使用js是如何实现的 样式 复制代码代码如下: <style type="text/css"> ...
随机推荐
- Hadoop2的简单安装
前面花了很多时间来介绍hadoop1的安装,随着hadoop的发展,hadoop2的应用也越来越普及,hadoop2解决了hadoop1中的很多问题,比如单点故障,namenode容量小的问题. 我们 ...
- Iframe的应用以及父窗口和子窗口的相互访问
点评:Iframe和FRAME的区别,方便大家以后在使用过程中根据实际需要取舍.- function getParentIFrameDocument(aID) { var rv = null; // ...
- 排序之希尔排序(shell sort)
前言 本篇博客是在伍迷兄的博客基础上进行的,其博客地址点击就可以进去,里面好博客很多,我的排序算法都来自于此:一些数据结构方面的概念我就不多阐述了,伍迷兄的博客中都有详细讲解,而我写这些博客只是记录自 ...
- Linux下的grep搜索命令详解(二)
grep与正规表达式 字符类 字符类的搜索:如果我想要搜寻 test 或 tast 这两个单词时,可以发现到,其实她们有共通的 't?st' 存在-这个时候,我可以这样来搜寻: [root@www ...
- 微软IOC容器Unity简单代码示例3-基于约定的自动注册机制
@(编程) [TOC] Unity在3.0之后,支持基于约定的自动注册机制Registration By Convention,本文简单介绍如何配置. 1. 通过Nuget下载Unity 版本号如下: ...
- LDR指令的格式:
http://blog.csdn.net/tanyouliang/article/details/6767011 LDR指令的格式: LDR{条件} 目的寄存器 <存储器地址> ...
- AFNetworking上传文件
-(void)upload{ AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; NSD ...
- socket编写简单回显server
socket在公司代码中应用比较广,比如接口调用的IPCRPC机制,经常看到这样的代码,但是一直也没有动手写过. 在某个比较大的进程中创建一个子进程,由于父子进程复制会浪费内存,可以将创建进程的命令通 ...
- PetaPoco 笔记
PetaPoco是一款适用于.Net 和Mono的微小.快速.单文件的微型ORM. PetaPoco有以下特色: 微小,没有依赖项--单个的C#文件可以方便的添加到任何项目中. 工作于严格的没有装饰的 ...
- 行为类模式(一):职责链(Chain Of Responsibility)
定义 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系. 将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. UML 优点 将请求的发送者和接收者解耦 可以 ...