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"> ...
随机推荐
- 30+学习Web设计和开发的优质新鲜资源
今天我们整理了一些最新的Web设计和开发的资源,这些资源都来自国外的流行站点,不过大家应该不会陌生,放在这里供大家收藏,在需要的时候方便翻阅和学习! 原文地址:http://www.goodfav.c ...
- LeetCode(8) - String to Integer (atoi)
虽然是easy,却是比较繁琐的一道题,需要考虑各种边界条件.在WA了好几遍之后,才把各种边界条件给补全.需要考虑到的因素如下: 输入不合法字符,非"0-9",对于首位,合法字符还包 ...
- wijmo
wijmo-5官网 Samples Forums Demos 1.当FlexGrid的单元格中文本过长时显示Tooltip 参考1:angular flexGrid tooltip on every ...
- dom 动态生产表格
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- [翻译]创建ASP.NET WebApi RESTful 服务(7)
实现资源分页 本章我们将介绍几种不同的结果集分页方式,实现手工分页,然后将Response通过两个不同的方式进行格式化(通过Response的Envelop元数据或header). 大家都知道一次查询 ...
- C++11常量表达式
[C++11之常量表达式] 关键字:constexpr: 中文学名:常量表达式. constexpr用于把运行期计算放置在编译期. 使用constexpr有3个限制: 1.函数中只能有一个return ...
- Hibernate资源
正在学马士兵Hibernate的同学来看这里,这里提供了他视频里需要的JAR包,请尽情下载,给好评喔. 一.Hibernate 3.3.2 核心JAR包 http://pan.baidu.com/s/ ...
- mv命令
mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 1.命令格式: mv [选项] 源文件或目 ...
- 为什么 Apple 开发者网站关闭是件好事?
作者:趋势科技 Apple 的开发者中心网站在 7 月 18 日因为安全漏洞或攻击而关闭.在他们的通知里,Apple 公司表示,这起安全事件可能导致开发商的姓名.通讯地址和电子邮件地址被盗取,虽然该公 ...
- C#用串口接收事件接不全数据的处理
问题描述:都知道用事件dataReceive来处理串口非常的方便,但当一次的数据过长时,就会出现截断数据的情况.比如说发一个指 令,返回一个30个字节的数据,但上位机则分两次来接收者30个数据. 解决 ...