一个ajax自动完成的例子

       在项目当中，经常会有输入省市名称的要求，如果采用下拉框的形式，用户选择会很不方便，因为选项太多。这种情况下可以采用AJAX自动完成功能。 见下图：

      

 首先看页面的标签（部分）：

          <td>航段起点</td>
              
          <td>  
              <html:hidden property="cityBegin" />     <!-- 这里存放的是实际存储的ID-->
              <html:text property="cityBeginText" onkeyup="search('cityBeginText','cityBegin','popup')"/> 
             <div style="autodiv" id="popup"><table><tbody></tbody></table></div> 			      
          </td>

 search函数具体实现：

function search(inputId,outputId,divId){
    init(inputId,outputId,divId);        //初始化相关页面元素    
    if ((inputField.value.length<=0)||(event.keyCode==13)){
        outputField.value="";
	    return false;
	}
	var tmp= inputField.value;
	
	var url='autocomplete.do';
	var pars ='action=city&city=' + tmp;
	var myAjax = new Ajax.Request(
        url,
        {
            method: 'get',
            parameters: pars,
            onComplete: this.showResponse                  //这里是回调函数。 
         }
     );
}

  在服务器端，返回的是xml格式的数据。形如：

 

<response>
    <item>
         <id>1</id><value>南京市</value>
    </item>
    <item>
         <id>2</id><value>南昌市</value>
    </item>
</response>

 

showResponse的任务有：解析返回的xml数据，计算div的位置，填充div。

 

function showResponse(originalRequest){
    clearDiv();            //先清空。
    outputField.value="";
    var values=originalRequest.responseXML.getElementsByTagName("value");
    var ids =originalRequest.responseXML.getElementsByTagName("id");
    var size = values.length;
    setOffsets();               //计算div的位置
    var row, cell, txtNode;
    for (var i = 0; i < size; i++) {                             //开始填充
        var nextNode = values[i].firstChild.data;
        var nextId = ids[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");
        var input = document.createElement("input");
        input.setAttribute("type","hidden");
        input.setAttribute("name","id");
        input.setAttribute("value",nextId);
        cell.onclick = function() { populateName(this); } ;    //注意这个函数populateName
        txtNode = document.createTextNode(nextNode);
        cell.appendChild(txtNode);
        cell.appendChild(input);
        row.appendChild(cell);
        tbody.appendChild(row);
  
    }	
     
    completeDiv.appendChild(table);
}

 

populateName函数的作用是什么呢？当鼠标在下拉的div上选择了某一行（地区）的时候，该地区在数据库端的id被存储到隐藏的input当中，这里是“cityBegin”，该函数的代码：

function populateName(cell){
    inputField.value = cell.firstChild.nodeValue;    //value被赋给了“cityBeginText”
    outputField.value=cell.lastChild.value;            //id被赋给了“cityBegin” 
    clearDiv();                                                                
     
}

 当该页面被提交后，服务器端先检查“cityBegin”的值空否，如果不空，则不需要再根据“cityBeginText”的值查询数据库，避免了地区id的重复查询。  当然，前提条件是地区信息是用户从下拉div当中选择的。

评论

11 楼 tear11 2009-01-09  

整合到了自己的框架里面，挺好的，
if ((inputField.value.length<=0)||(event.keyCode==13)){  
        outputField.value="";  
        return false;  
    }  
这里是不是要clearDiv();要不然把输入框（cityBeginText）的内容全部删除后，completeDiv还在显示；

10 楼 zhudp.cn 2008-12-24  

不错！
看看我的怎么样？
http://zhudp-cn.iteye.com/admin/blogs/254445

9 楼 z95001188 2008-12-24  

不错.现在大多是用Jquery插件实现.

8 楼 wqwqvic 2008-07-28  

唉 那美女是作者的老婆！！！！！！

7 楼 wqwqvic 2008-07-25  

美女姐姐什么时候上线啊，我都等你好几天了！我有问题需要你帮助啊是关于JBPM的，上线给我发消息啊

6 楼 lovelium 2008-07-25  

不错,美女要支持

5 楼 kimmking 2008-07-25  

赞一个


-------
PS：
JSF框架ICEFACES，richfaces之类的

或是YUI等JS库 都有类似的例子

4 楼 onetown 2008-07-25  

貌似lz做的和我现在做的东西比较像, 给机票代理人或者航空公司做的吧? 能否留个联系方式交流交流.

3 楼 guowei821120 2008-07-25  

美女 支持

2 楼 zhangxi123 2008-06-14  

下了看看！谢谢

1 楼 yourgame 2008-06-14  

好东西,值得借鉴