(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. WebGIS的大众化服务

    WebGIS是Web技术与GIS相结合的产物.WebGIS的真正意义在于,它将GIS从专业应用推向了大众化服务,同时为地理信息共享提供了方便而有效的途径. 一.ESRI大会关于WebGIS的报告 纵观 ...

  2. LeetCode(5) - Longest Palindromic Substring

    这道题要求的是给你一个string, 如“adcdabcdcba",要求返回长度最大的回文子字符串.这里有两个条件,一是子字符串,而是回文.用纯暴力搜索的话,需要用到O(n^3)的时间,必然 ...

  3. Ibatis 美元符号替换为井号

    原码:where name = '$name$' or code = '$code$' 修改后: where name = #name# or code = #code#

  4. T-SQL运算符

    运算符 1.算术运算符 算术运算符 说明 + 加法 - 减法 * 乘法 / 除法 % 取模,两个整数相除后的余数 2.位运算符 位运算符 说明 &(与.and) 按位逻辑与运算 |(或.OR) ...

  5. static_cast, dynamic_cast, const_cast探讨

    转自:http://www.cnblogs.com/chio/archive/2007/07/18/822389.html 首先回顾一下C++类型转换: C++类型转换分为:隐式类型转换和显式类型转换 ...

  6. <转>单播,广播,组播的缺点与优点

    原文链接:http://apje.blog.163.com/blog/static/145345252007101175714761/ 当前的网络中有三种通讯模式:单播.广播.组播(多播),其中的组播 ...

  7. 网易及新浪IP查询接口

    通过IP地址获取对应的地区信息通常有两种方法:1)自己写程序,解析IP对应的地区信息,需要数据库.2)根据第三方提供的API查询获取地区信息. 第一种方法,参见文本<通过纯真IP数据库获取IP地 ...

  8. How to setup Wicket Examples in Eclipse

    Wicket examples is a good place to learn Apache Wicket by examples, and a must reference site for ne ...

  9. mac电脑Coding显示/隐藏文件

    苹果Mac OS X操作系统下,隐藏文件是否显示有很多种设置方法,最简单的要算在Mac终端输入命令.显示/隐藏Mac隐藏文件命令如下(注意其中的空格并且区分大小写): 显示Mac隐藏文件的命令:def ...

  10. 10 个你需要了解的最佳 javascript 开发实践

    原文:Top 10 “Must Follow” JavaScript Best Practices Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让 ...