当前位置: 代码迷 >> Ajax >> 一个ajax自动完成的事例
  详细解决方案

一个ajax自动完成的事例

热度:169   发布时间:2016-05-11 09:11:06.0
一个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当中选择的。

1 楼 yourgame 2008-06-14  
好东西,值得借鉴
2 楼 zhangxi123 2008-06-14  
下了看看!谢谢
3 楼 guowei821120 2008-07-25  
美女 支持
4 楼 onetown 2008-07-25  
貌似lz做的和我现在做的东西比较像, 给机票代理人或者航空公司做的吧? 能否留个联系方式交流交流.
5 楼 kimmking 2008-07-25  
赞一个


-------
PS:
JSF框架ICEFACES,richfaces之类的

或是YUI等JS库 都有类似的例子
6 楼 lovelium 2008-07-25  
不错,美女要支持
7 楼 wqwqvic 2008-07-25  
美女姐姐什么时候上线啊,我都等你好几天了!我有问题需要你帮助啊是关于JBPM的,上线给我发消息啊
8 楼 wqwqvic 2008-07-28  
唉 那美女是作者的老婆!!!!!!
9 楼 z95001188 2008-12-24  
不错.现在大多是用Jquery插件实现.
10 楼 zhudp.cn 2008-12-24  
不错!
看看我的怎么样?
http://zhudp-cn.iteye.com/admin/blogs/254445
11 楼 tear11 2009-01-09  
整合到了自己的框架里面,挺好的,
if ((inputField.value.length<=0)||(event.keyCode==13)){  
        outputField.value="";  
        return false;  
    }  
这里是不是要clearDiv();要不然把输入框(cityBeginText)的内容全部删除后,completeDiv还在显示;
  相关解决方案
本站暂不开放注册!
内测阶段只得通过邀请码进行注册!
 
  • 最近登录:Mon Jan 23 12:30:08 CST 2017
  • 最近登录:Mon Jan 23 12:30:08 CST 2017
  • 最近登录:Mon Jan 23 12:30:08 CST 2017
  • 最近登录:Mon Jan 23 12:30:08 CST 2017
  • 最近登录:Mon Jan 23 12:30:08 CST 2017