function createAjaxObj() {
var httpRequest = false;
//判断是否包含XMLHttpRequest对象 PS:将来IE高也有可能继承次对象
if (window.XMLHttpRequest) {
//火狐 , Safari 等浏览器
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType)
httpRequest.overrideMimeType('text/xml');
}//判断是否支持Active控件对象
else if (window.ActiveXObject) {
//IE浏览器
try {
//IE5.0
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//IE5.5以上
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
//返回创建好的AJAX对象
return httpRequest;
}
var searchReq = createAjaxObj();
var OsTyep = '';
function getOs() {
//判断浏览器类型
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.getElementById('txtSearch').attachEvent("onpropertychange", search);
OsTyep = "MSIE";
} else if (navigator.userAgent.indexOf("Firefox") > 0) {
document.getElementById('txtSearch').addEventListener("input", search, false);
OsTyep = "Firefox";
}
}
function ClearOS() {
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.getElementById('txtSearch').detachEvent("onpropertychange", search);
OsTyep = "MSIE";
} else if (navigator.userAgent.indexOf("Firefox") > 0) {
document.getElementById('txtSearch').removeEventListener("input", search, false);
OsTyep = "Firefox";
}
}
function createAjaxObj() {
var httpRequest = false;
//判断是否包含XMLHttpRequest对象 PS:将来IE高也有可能继承次对象
if (window.XMLHttpRequest) {
//火狐 , Safari 等浏览器
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType)
httpRequest.overrideMimeType('text/xml');
//ie: onpropertychange
//ff: oninput
} //判断是否支持Active控件对象
else if (window.ActiveXObject) {
//IE浏览器
try {
//IE5.0
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//IE5.5以上
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
//返回创建好的AJAX对象
return httpRequest;
}
//异步请求服务器获取搜索结果
function search() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
//获得文本框中的值
var valStr = escape(document.getElementById("txtSearch").value);
//建立连接
searchReq.open("GET", encodeURI('Search.ashx?search=' + valStr+'&fresh=' + Math.random()), true);
//当请求状态改变时调用 handleSearch方法
searchReq.onreadystatechange = handleSearch;
searchReq.send(null);
}
}
//返回结果处理方法
function handleSearch() {
if (searchReq.readyState == 4) {
//获得搜索提示结果的元素DIV
var searchDIV = document.getElementById("search_div");
searchDIV.innerHTML = "";
//用^将返回的文本数据分割成数组
var resultStrArr = searchReq.responseText.split("^");
//循环构建HTML代码
for (var i = 0; i < resultStrArr.length - 1; i++) {
var htmlStr = '<div onmouseover="selectOverDiv(this,'+i+');" ';
htmlStr += 'onmouseout="selectOutDiv(this,'+i+');" ';
htmlStr += 'onclick="setSearch(this.innerHTML);" ';
htmlStr += 'class="search_link " style="display:block;width:100%;" >' + resultStrArr[i] + '</div>';
searchDIV.innerHTML += htmlStr;
}
ShowDiv();
x = -1;
}
}
function selectOverDiv(div_value, i) {
div_value.className = "search_link_over";
var my_div = document.getElementById("search_div").getElementsByTagName("div")
var the_num = my_div.length;
for (var k = 0; k < the_num; k++) {
selectOut(my_div[k]);
if (k == i) {
selectOver(my_div[k])
}
}
isCheckDiv = true;
x = i;
}
function selectOutDiv(div_value,i) {
isCheckDiv = false;
div_value.className = "search_link";
x = i;
}
function setSearch(value) {
//清空文本框的内容改变事件是因为我们给选中值复制时 该事件会触发
//所以先清空次事件
ClearOS();
document.getElementById("txtSearch").value = value;
//设置该属性为false 在调用HiddenDiv函数会隐藏提示结果DIV
isCheckDiv = false;
HiddenDiv();
//在赋值完成后再次附加修改时间
getOs();
}
function ShowDiv() {
var content = document.getElementById("txtSearch").value;
var divConten = document.getElementById("search_div").innerHTML;
if (content != '' && divConten != '') {
document.getElementById("search_div").style.display = "block"
} else {
isCheckDiv = false;
HiddenDiv();
}
}
function HiddenDiv() {
if (isCheckDiv == false) {
document.getElementById("search_div").style.display = "none";
document.getElementById("search_div").innerHTML = '';
}
}
var index = -1; //表示当前选中的行索引
function keyDown() {
var value = event.keyCode
//向上38，向下40，回车13
var the_key = event.keyCode
//判断提示DIV是否是现实状态
if (document.getElementById("search_div").style.display != "none") {
//获取里面所用行
var my_div = document.getElementById("search_div").getElementsByTagName("div")
var the_num = my_div.length;
switch (the_key) {
case 40: //向下
//判断index是否已经到最下面
if (index == the_num - 1) {
index = 0;
} else {
index++;
}
//清楚所有选中
for (var i = 0; i < the_num; i++) {
selectOut(my_div[i]);
}
//根据index选中对应索引行
for (i = 0; i < the_num; i++) {
if (i == index) {
selectOver(my_div[i])
}
}
break;
case 38: //向上
//判断index是否已经到最上面
if (index == 0) {
index = the_num-1;
} else { index--; }
//清楚所有选中
for (var i = 0; i < the_num; i++) {
selectOut(my_div[i]);
}
//根据index选中对应索引行
for (i = 0; i < the_num; i++) {
if (i == index) {
selectOver(my_div[i])
}
}
break;
case 13: //回车
//将选中的内容放入文本框中
if (my_div[index].innerHTML != null) {
setSearch(my_div[index].innerHTML);
}
break;
}
}
}
document.onkeydown = keyDown;
- 1
- 2
- 3
前往页