搜索引擎的提示效果完整的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"; }