(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实现搜索引擎的提示效果的更多相关文章

  1. 搜索引擎的提示效果完整的JavaScript代码

    function divShow() { <%--判断输入的是否为空 如果为空则隐藏div 如果不为空则显示div --%> if ($("#tbxSearchKeywords& ...

  2. [锋利的JQ]-超链接提示效果

    关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...

  3. 炫!一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  4. Fort.js – 时尚、现代的表单填写进度提示效果

    Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...

  5. SweetAlert – 替代 Alert 的漂亮的提示效果

    Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...

  6. Ladda – 把加载提示效果集成到按钮中,提升用户体验

    Ladda 是一组集成了加载提示的按钮,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验.主要用于在用户点击提交之后,向用户提供即时的反馈,让他们知道浏览器正在处用户提交的任务. 您可能感兴趣的 ...

  7. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  8. iOS开发——UI篇&提示效果

    提示效果 关于iOS开发提示效果是一个很常见的技术,比如我们平时点击一个按钮,实现回馈,或者发送网络请求的时候! 技术点: 一:View UIAlertView UIActionSheet 二:控制器 ...

  9. js简单实现删除记录时的提示效果

    删除记录时的提示效果,挺人性化的,实现的方法有很多,在本文为大家介绍下使用js是如何实现的 样式 复制代码代码如下: <style type="text/css">  ...

随机推荐

  1. 30+学习Web设计和开发的优质新鲜资源

    今天我们整理了一些最新的Web设计和开发的资源,这些资源都来自国外的流行站点,不过大家应该不会陌生,放在这里供大家收藏,在需要的时候方便翻阅和学习! 原文地址:http://www.goodfav.c ...

  2. LeetCode(8) - String to Integer (atoi)

    虽然是easy,却是比较繁琐的一道题,需要考虑各种边界条件.在WA了好几遍之后,才把各种边界条件给补全.需要考虑到的因素如下: 输入不合法字符,非"0-9",对于首位,合法字符还包 ...

  3. wijmo

    wijmo-5官网 Samples Forums Demos 1.当FlexGrid的单元格中文本过长时显示Tooltip 参考1:angular flexGrid tooltip on every ...

  4. dom 动态生产表格

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. [翻译]创建ASP.NET WebApi RESTful 服务(7)

    实现资源分页 本章我们将介绍几种不同的结果集分页方式,实现手工分页,然后将Response通过两个不同的方式进行格式化(通过Response的Envelop元数据或header). 大家都知道一次查询 ...

  6. C++11常量表达式

    [C++11之常量表达式] 关键字:constexpr: 中文学名:常量表达式. constexpr用于把运行期计算放置在编译期. 使用constexpr有3个限制: 1.函数中只能有一个return ...

  7. Hibernate资源

    正在学马士兵Hibernate的同学来看这里,这里提供了他视频里需要的JAR包,请尽情下载,给好评喔. 一.Hibernate 3.3.2 核心JAR包 http://pan.baidu.com/s/ ...

  8. mv命令

    mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 1.命令格式: mv [选项] 源文件或目 ...

  9. 为什么 Apple 开发者网站关闭是件好事?

    作者:趋势科技 Apple 的开发者中心网站在 7 月 18 日因为安全漏洞或攻击而关闭.在他们的通知里,Apple 公司表示,这起安全事件可能导致开发商的姓名.通讯地址和电子邮件地址被盗取,虽然该公 ...

  10. C#用串口接收事件接不全数据的处理

    问题描述:都知道用事件dataReceive来处理串口非常的方便,但当一次的数据过长时,就会出现截断数据的情况.比如说发一个指 令,返回一个30个字节的数据,但上位机则分两次来接收者30个数据. 解决 ...