Google 智能提示搜索

/* 相对长度单位 em 元素字体的高度。 ex 字母“x”的高度。 px 像素。 % 百分比 绝对长度单位 in 英寸(1 英寸 = 2.54 厘米)。 cm 厘米。 mm 毫米。 pt 磅(1 磅 = 1/72 英寸)。 pc 皮卡(1 皮卡 = 12 磅)。 */ var XMLHttpReq; var completeDiv; var inputField; var completeTable; var completeBody; // 当点击页面中其它地方时，将弹出的层隐藏 document.onclick = function(){ e = window.event; if(e.srcElement.tagName!="td"){ clearNames(); } } // 创建XMLHttpRequest对象 function createXMLHttpRequest() { if(window.XMLHttpRequest) { // Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE浏览器 try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } } // 发送匹配请求函数，这里可以加个URL参数findNames(url) function findNames() { inputField = document.getElementById("names"); inputField.setAttribute("autocomplete","off"); completeTable = document.getElementById("complete_table"); completeDiv = document.getElementById("popup"); completeBody = document.getElementById("complete_body"); if (inputField.value.length > 0) { createXMLHttpRequest(); // 这里根据自己的需要更换url var url = "autoComplete.do?swjgdm=" + escape(inputField.value); XMLHttpReq.open("GET", url, true); XMLHttpReq.onreadystatechange = processMatchResponse;// 指定响应函数 XMLHttpReq.send(null); // 发送请求 } else { clearNames(); } } // 处理返回匹配信息函数 function processMatchResponse() { if (XMLHttpReq.readyState == 4) { // 判断对象状态 if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息 // 解析返回的XML var items = parse(XMLHttpReq.responseXML); setNames(items); }else { // 页面不正常 window.alert("您所请求的页面有异常。"); } } } // 生成与输入内容匹配行 function setNames(names) { clearNames(); var size = names.length; //setOffsets(); var divWidth = 0; var maxlengthString; // 用于记录最长的字符串 var row, cell, txtNode; for (var i = 0; i < size; i++) { var nextNode = names[i].text; // 取长度最大的字符串的长度*10作为层的宽度 if(nextNode.length>divWidth){ divWidth = nextNode.length; maxlengthString = nextNode; } var nextNodeValue = names[i].value; row = document.createElement("tr"); cell = document.createElement("td"); cell.onmouseout = function() {this.className='mouseOver';}; cell.onmouseover = function() {this.className='mouseOut';}; cell.setAttribute("bgcolor", "#FFFAFA"); cell.setAttribute("border", "0"); // 下面这句如果使用cell.onclick = function() { completeField(nextNodeValue); } ;则nextNodeValue为循环后的最后一个值 cell.onclick = new Function("completeField("+nextNodeValue+");"); txtNode = document.createTextNode(nextNode); cell.appendChild(txtNode); row.appendChild(cell); completeBody.appendChild(row); } // 灵活的设置弹出层的宽度 divWidth = replaceCNWords(maxlengthString).length; setOffsets(divWidth); } // 设置显示位置 function setOffsets(divWidth) { // 显示出来的层的宽度 completeTable.style.width = divWidth+"ex";//"180px";//inputField.offsetWidth + "px"; var left = calculateOffset(inputField, "offsetLeft"); var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight; completeDiv.style.border = "black 1px solid"; completeDiv.style.left = left + "px"; completeDiv.style.top = top + "px"; } // 计算显示位置 function calculateOffset(field, attr) { var offset = 0; while(field) { offset += field[attr]; field = field.offsetParent; } return offset; } // 填写输入框 function completeField(value) { inputField.value = value; clearNames(); } // 清除自动完成行 function clearNames() { if(completeBody!=null && completeBody.childNodes!=null){ var ind = completeBody.childNodes.length; for (var i = ind - 1; i >= 0 ; i--) { completeBody.removeChild(completeBody.childNodes[i]); } completeDiv.style.border = "none"; } } // 解析返回的XML // content 是一个DOM对象 /* <?xml version="1.0" encoding="UTF-8"?> <root> <response> <item> <text>1000000000 国家税务局</text> <-- 这是显示出来的文字 <value>1000000000</value> <-- 这是设置到输入框里的值 </item> <item> <text>123456789 地方税务局</text> <value>123456789</value> </item> </response> </root> */ function parse(content){ var root = content.documentElement; var responseNodes = root.getElementsByTagName("response"); var itemList = new Array(); if(responseNodes.length > 0) { var responseNode = responseNodes[0]; var itemNodes = responseNode.getElementsByTagName("item"); for (var i=0; i<itemNodes.length; i++) { var textNodes = itemNodes[i].getElementsByTagName("text"); var valueNodes = itemNodes[i].getElementsByTagName("value"); if (textNodes.length > 0 && valueNodes.length > 0) { var text = textNodes[0].firstChild.nodeValue; var value = valueNodes[0].firstChild.nodeValue; itemList.push({"text":text,"value":value}); } } } return itemList; } // 计算字符串中汉字的个数 function calcuteCNWord(cnwords){ var cnlen = 0; // 汉字个数 var regex = /[\u4E00-\u9FA5]+/g; var temp = cnwords.replace(regex,""); cnlen = cnwords.length - temp.length; return cnlen; } // 将字符串里的每个汉字转为两个空格,返回转换后的字符串 function replaceCNWords(cnwords){ var regex = /[\u4E00-\u9FA5]{1}/g; var newstr = cnwords.replace(regex," "); return newstr; }