我有个查询事件,想做成google那样的,下面有提示信息的那种????(望高手指点一二)

恩，我也想学习学习。那效果就是像我们智能ABC输入法一样，输入一个拼音，同步出现不同的子。

我也不知道是怎么做的,有DEMO吗???

一个INPUT框，下面是一个DIV。
根据INPUT框的变化，调用AJAX查询数据去填充该DIV。
这样可以实现类似效果，不知道GOOGLE具体是如何实现的。

有本书叫<<ajax实战>>里面有完整的代码，你可以去看看。

<head>
<script type="text/javascript">
var XMLHttpReq;
var popup;
var inputField;
var complete_table;
var completebody;
//创建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) {}
}
}
}
//发送匹配请求函数
function findNames(){
inputField=document.getElementById("names");
popup=document.getElementById("popup");
complete_table=document.getElementById("complete_table");
completebody=document.getElementById("complete_body");
if(LTrim(inputField.value).length>0){
createXMLHttpRequest();
var url="AutoMatch?action=match&names=" + LTrim(inputField.value);
// alert(url);
XMLHttpReq.open("get",url,true);
XMLHttpReq.onreadystatechange=processMatchResponse;//指定响应函数
XMLHttpReq.send(null);
}
}
//返回函数
function processMatchResponse(){
if(XMLHttpReq.readyState==4){
if(XMLHttpReq.status==200){
// alert(XMLHttpReq.responseXML.getElementsByTagName("res"));
setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
}else{
alert("连接失败");
}
}
}
//生成与输入内容匹配行
function setNames(names){
clearNames();
var size=names.length;
setOffsets();
var row, cell, txtNode;
var row1, cell1, txtNode1;
for(var i=0;i<size;i++){
var nextNode = names[i].firstChild.data;
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.setAttribute("style","cursor:hand");
    cell.onclick = function() { completeField(this); } ;
    txtNode = document.createTextNode(nextNode);
    cell.appendChild(txtNode);
    row.appendChild(cell);
    completebody.appendChild(row);
    aa.style.display="";
}
}
//清除自动完成行
function clearNames(){
var ind = completebody.childNodes.length;
for(var i=ind-1;i>=0;i--){
completebody.removeChild(completebody.childNodes[i])
}
popup.style.border="none";
if(aa.style.display!="none"){//判断关闭
aa.style.display="none";
}
}
//计算显示位置
function setOffsets(){
// alert(inputField.offsetWidth);
    complete_table.style.width = inputField.offsetWidth; + "px";
var left = calculateOffset(inputField, "offsetLeft");
var top=calculateOffset(inputField, "offsetTop")+inputField.offsetHeight;
popup.style.border="black 1px solid";//设置黑边框
popup.style.left=left + "px";
popup.style.top=top+"px";
}
//计算显示位置
    function calculateOffset(field, attr) {
      var offset = 0;
      while(field != null) {
        offset += field[attr];
        field = field.offsetParent;
      }
      return offset;
    }
     //填写输入框
    function completeField(cell) {
        inputField.value = cell.firstChild.nodeValue;
        clearNames();
    }
String.prototype.Trim = function()
{
return this.replace(/(^s*)|(s*$)/g, "");
} function LTrim(str){ //去掉字符串的头空格
for(i=0;i<str.length;i++){
if(str.charAt(i)!=" "&&str.charAt(i)!=" ") break;
}
str = str.substring(i,str.length);
return str;
} </script>
</head> <body>
<table style="BORDER-COLLAPSE: collapse" borderColor=#111111
cellSpacing=0 cellPadding=2 width=400 bgColor=#f5efe7 border=0>
<tr>
<td>
输入关键字：
</td>
<td>
<input type="text" id="names" onkeyup="findNames()"
style="height:20;" />
<div style="position:absolute;" id="popup">
<table id="complete_table" bgcolor="#FFFAFA" border="0"
cellspacing="0" cellpadding="0">
<tbody id="complete_body">
</tbody>
<tr id="aa" style="display:none" align="right">
<td>
<a href="#" onclick="clearNames()">关闭</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("11111");
// 设置接收信息的字符集
     request.setCharacterEncoding("UTF-8");
     //接收浏览器端提交的信息
String action = request.getParameter("action");
String name1= request.getParameter("names");
String name = new String(name1.getBytes("ISO8859_1"), "GBK");
//设置输出信息的格式及字符集
        response.setContentType("text/xml; charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        //创建输出流对象
        PrintWriter out = response.getWriter();
        //依据验证结果输出不同的数据信息
        out.println("<response>");

        //数据库操作
        DB db = new DB();
ResultSet rs;
        String strSql=null;
//        request.getSession().setAttribute("test", "测试");
        //匹配
        if ("match".equals(action)){
     System.out.println("2222");
            strSql = "select * from sort where name like'%" + name + "%'";
            System.out.println(strSql);
     rs = db.executeQuery(strSql);
     try {
     while ( rs.next()) {
     out.println("<res>" + rs.getString("name") + "</res>");
     System.out.println(rs.getString("name"));
     }
     } catch (SQLException e) {
     e.printStackTrace();
     }
        }
        else if ("search".equals(action)){
            strSql = "select id from sort where name ='" + name + "'";
     rs = db.executeQuery(strSql);
     try {
     if ( rs.next()) {
     out.println("<res>" + rs.getString("id") + "</res>");
     }
     } catch (SQLException e) {
     e.printStackTrace();
     }

        }
out.println("</response>");
out.close();
    }

采用 Ajax 的自动完成功能用 JSP 的话，有个 AjaxTags 可以用的，它有现在成的标签。这个是它的官方站点：http://ajaxtags.sourceforge.net/index.html

dojo里也有响应的widget，有兴趣可以去找找

调试易

我有个查询事件,想做成google那样的,下面有提示信息的那种????(望高手指点一二)

解决方案 »