搜索引擎的提示效果完整的JavaScript代码
function divShow() {
<%--判断输入的是否为空
如果为空则隐藏div
如果不为空则显示div
--%>
if ($("#tbxSearchKeywords").val() == "") {
document.getElementById("divshow").style.display = "none";
} else {
document.getElementById("divshow").style.display = "inherit";
//编写Ajax的方法
var name = $("#tbxSearchKeywords").val()
$.ajax({
//提交方式为Get
type: "get",
//访问的handler地址 参数d=" + new Date()是为了防止缓存是他每次访问的参数不同
url: "../DivHanadler.ashx?d=" + new Date(),
//设置提交的参数
data: { name: name, seach: $("#ddlSearchType").val() },
//提交的方式是json提交
dataType: "json",
//如果成功则得到返回的结果然后用javascript库中的each方法遍历返回的json集合
success: function (data) {
var selectData = data.selectData;
var html = "";
//用each遍历json集合
$.each(selectData, function (i, dataitem) {
//alert(i);
var str = dataitem.item
html = html + "<div id='div" + i + "' onmouseover='getBlue(this)'onmouseout='getWhite(this)' onclick='getHtml(this)'style='font-size:16px;padding-top:5px;padding-buttom:5px;'><span style='font-weight:bold'>" + str.substring(0, name.length) + "</span>" + str.substring(name.length, str.length) + "</div>";
});
$("#divshow").html(html);
},
//如果失败的话则弹出错误提醒
error: function (data) {
document.getElementById("divshow").style.display = "none";
}
});
}
}
//当鼠标点击时得到点解的文本内容
function getHtml(obj) {
document.getElementById("tbxSearchKeywords").value = obj.innerText;
}
//改变背景颜色的方法
function getBlue(obj) {
obj.style.backgroundColor = "#e8e3e3";
}
function getWhite(obj) {
obj.style.backgroundColor = "white";
}
var i = 0;
var num = 0;
//当按上下键是改变背景颜色和文本内容
function changeBack() {
if (event.keyCode == 40) {
document.getElementById("tbxSearchKeywords").onkeyup = function () { };
if (i == 0) {
document.getElementById("div0").style.backgroundColor = "#e8e3e3";
} else if (i > 9) {
document.getElementById("div0").style.backgroundColor = "#e8e3e3";
document.getElementById("div9").style.backgroundColor = "white";
i = 0;
} else {
document.getElementById("div" + (i - 1)).style.backgroundColor = "white";
document.getElementById("div" + i).style.backgroundColor = "#e8e3e3";
}
num = 40;
document.getElementById("tbxSearchKeywords").value = document.getElementById("div" + i).innerText;
i++;
} else if (event.keyCode == 38) {
if (num == 40) {
i--;
}
document.getElementById("tbxSearchKeywords").onkeyup = function () { };
if (i == 0) {
//document.getElementById("div0").style.backgroundColor = "#e8e3e3";
} else if (i < 0) {
document.getElementById("div9").style.backgroundColor = "#e8e3e3";
document.getElementById("div0").style.backgroundColor = "white";
i = 9;
}
else {
document.getElementById("div" + (i - 1)).style.backgroundColor = "#e8e3e3";
document.getElementById("div" + i).style.backgroundColor = "white";
}
if (i <= 0) {
i = 10;
document.getElementById("div0").style.backgroundColor = "white";
document.getElementById("div" + (i - 1)).style.backgroundColor = "#e8e3e3";
}
document.getElementById("tbxSearchKeywords").value = document.getElementById("div" + (i - 1)).innerText;
i--;
num = 38;
} else {
if (event.keyCode == 13) {
document.getElementById("divshow").style.display = "none";
searchWithKeywords();
} else {
document.getElementById("tbxSearchKeywords").onkeyup = divShow;
}
}
}
//当点击页面其他地方时讲提示的DIV隐藏
document.getElementsByTagName("body")[0].onclick = function () {
document.getElementById("divshow").style.display = "none";
}
搜索引擎的提示效果完整的JavaScript代码的更多相关文章
- jq实现搜索引擎的提示效果
(function ($) { $.fn.Search = function (options) { var defaults = { inputid: "search", div ...
- JavaScript函数实现鼠标指向后带图片的提示效果
转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...
- 完整的JavaScript版的信用卡校验代码
function isValidCreditCard(type, ccnum) { if (type == "Visa") { // Visa: length 16, prefix ...
- 特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 2018年最新搜索引擎转跳JavaScript代码(竞价广告专用)
JavaScript代码如下,请放在script标签内: eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.r ...
- 编写快速、高效的JavaScript代码
许多Javascript引擎都是为了快速运行大型的JavaScript程序而特别设 计的,例如Google的V8引擎(Chrome浏览器,Node均使用该引擎).在开发过程中,如果你关心你程序的内存和 ...
- 超链接提示效果jQuery+CSS+html
我们知道浏览器自带了超链接提示, 只需要在超链接中加入 title 属性就可以了. <a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里 ...
- 使用C#解析并运行JavaScript代码
如果想在C#编程中解析并运行JavaScript代码,常见的方式有两种: 利用COM组件“Microsoft Script Control”,可参见:C#使用技巧之调用JS脚本方法一 利用JScrip ...
- Google JavaScript代码风格指南
Google JavaScript代码风格指南 修正版本 2.28 Aaron Whyte Bob Jervis Dan Pupius Eric Arvidsson Fritz Schneider R ...
随机推荐
- 【转】iOS 宏(define)与常量(const)的正确使用-- 不错
原文网址:http://www.jianshu.com/p/f83335e036b5 在iOS开发中,经常用到宏定义,或用const修饰一些数据类型,经常有开发者不知怎么正确使用,导致项目中乱用宏与c ...
- (八)学习MVC之三级联动
1.新建项目,MVC选择基本模板 2.新建类:Model/Student.cs,数据库信息有三个实体:分别是年级.班级和学生. using System; using System.Collectio ...
- u-boot 环境变量参数设置
今天本来是烧写内核,结果一不小心把uboot也整不能用了,无奈之下只好重新烧个uboot,等都弄好以后,发现系统还是启动不了,原来是启动参数设置不对,于是找到了这篇文章,//是我添加的内容. 原文地址 ...
- c#保存datagridview中的数据时报错 “动态SQL生成失败。找不到关键信息”
ilovejinglei 原文 C#中保存datagridview中的数据时报错"动态SQL生成失败.找不到关键信息" 问题描述 相关代码 using System; us ...
- MSP430主系统时钟以及430的低功耗设置
如何将系统时钟设置到外部高频晶体振荡器,430的MCLK默认的是DCO的,如何安全的从DCO切换到外部晶体振荡器,这是一个很重要的步骤,因为经过此步骤,可以极大地提高430的处理能力,DCO在内部,可 ...
- HDU-4612 Warm up 边双连通分量+缩点+最长链
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4612 简单图论题,先求图的边双连通分量,注意,此题有重边(admin还逗比的说没有重边),在用targ ...
- JSON.parse: expected property name or '}'
早上被这问题坑了一个小时有了.后台返回的json如下,一切正常,但是手动把下面的json复制到js代码中,一直提示“ JSON.parse: expected property name or '}' ...
- Android实例-拍摄和分享照片、分享文本(XE8+小米2)
结果: 1.分享文本不好使,原因不明.有大神了解的,请M我,在此十分感谢. 2.如果想支持图片编辑,将Action事件的Editable改为True. 相关资料: 官网地址:http://docwik ...
- 谷歌下设置滚动条的css样式
.oLi-lists-scroll::-webkit-scrollbar { width:5px; padding:1px; background:url(../images/repeat-bar. ...
- 【Stage3D学习笔记续】山寨Starling(十):高效游戏设计、纹理集和ATF
我发布了经过批处理优化的v0.3版,点击下载:https://github.com/hammerc/hammerc-study-Stage3D/archive/v0.3.zip 先看看我们批处理优化后 ...