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代码的更多相关文章

  1. jq实现搜索引擎的提示效果

    (function ($) { $.fn.Search = function (options) { var defaults = { inputid: "search", div ...

  2. JavaScript函数实现鼠标指向后带图片的提示效果

    转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...

  3. 完整的JavaScript版的信用卡校验代码

    function isValidCreditCard(type, ccnum) { if (type == "Visa") { // Visa: length 16, prefix ...

  4. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 2018年最新搜索引擎转跳JavaScript代码(竞价广告专用)

    JavaScript代码如下,请放在script标签内: eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.r ...

  6. 编写快速、高效的JavaScript代码

    许多Javascript引擎都是为了快速运行大型的JavaScript程序而特别设 计的,例如Google的V8引擎(Chrome浏览器,Node均使用该引擎).在开发过程中,如果你关心你程序的内存和 ...

  7. 超链接提示效果jQuery+CSS+html

    我们知道浏览器自带了超链接提示, 只需要在超链接中加入 title 属性就可以了. <a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里 ...

  8. 使用C#解析并运行JavaScript代码

    如果想在C#编程中解析并运行JavaScript代码,常见的方式有两种: 利用COM组件“Microsoft Script Control”,可参见:C#使用技巧之调用JS脚本方法一 利用JScrip ...

  9. Google JavaScript代码风格指南

    Google JavaScript代码风格指南 修正版本 2.28 Aaron Whyte Bob Jervis Dan Pupius Eric Arvidsson Fritz Schneider R ...

随机推荐

  1. 使用SVN小结

    自从加入团队后,开始使用SVN,以下是个人对SVN的一些认识和小结. 一.SVN是什么? SVN是版本管理工具,譬如团队进行项目开发,项目代码都储存在服务器上,成员可用SVN在本地获得并更新代码. 二 ...

  2. Jquery AutoComplete的使用方法实例

    jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项 ...

  3. 【转】Linux(Ubuntu)下面SecureCRT 完全破解

    仅供测试, 勿用作商业用途.首先要到vandyke网站下载一个securecrt, 需要注册.http://www.vandyke.com/download/securecrt/download.ht ...

  4. Android UI -- 布局介绍(布局包括FrameLayout, LinearLayout, RelativeLayout, GridLayout)

    首先介绍常用布局类 FrameLayout 最简单的布局管理器. 这个布局管理类有几个特性: 添加组件默认在左上角的. 如果添加多个组件会叠加到一起,并且都在左上角.(可以通过一gravity属性改变 ...

  5. 浅析ado.net获取数据库元数据信息 DeriveParameters

    写这个文章源于早先对ADO.Net获取数据库元数据上的认识,去年我在阅读ADO.Net Core Reference的时候曾经注意过DataSet的FillSchema的这个方法.这方面,在我之前的随 ...

  6. 用Python操作Excel2007 及以上的版本读写,来自官方的Demo

    大牛请略过,新手可以参考,具体见下面的代码注释, 另外一个问题,想学习这个语言,最好还是英语牛一些,可以去官网多看看有用的类库,汉语的资料不是很全 #运行环境 3.4,下面这个操作Excel的包是针对 ...

  7. JqueryTips小实验,浏览器滚动条不限制

    最近做公司的项目有些地方可能需要一些小提示,于是自己建立项目研究tips.在此之前看到过一些别人写的JqueryTips,于是借鉴了一些别人的经验在此基础上我做出了一些改进. 有的同学可能使用过其他一 ...

  8. Eclipse热部署JSP

    项目中JSP修改,每次都要重新部署启动才生效,我真切记得以前都不是这样子的 本来应该只需要刷新页面就可以查看到最新的修改的了 和以前工作空间项目配置对比        唯一不同的是,我现在这个工作空间 ...

  9. 零基础学习hadoop到上手工作线路指导

    零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...

  10. 卸载redhat6.5的yum,安装centos6的yum,配置第三方yum源

    **redhat的yum在线更新是收费的,如果没有注册的话不能使用,如果要使用,需将redhat的yum卸载后,重启安装其他yum源,再配置其他源.** 本文包括配置本地源及第三方源.第三方源包括:网 ...