我玩Ajaxtags(autocomplete)

昨天下午突然接到公司通知,以前处理的XX物资系统的部门,班组,工程,供应厂商部分都需要修改成Ajaxtags的autocomplete来完成,用户需要输入查询码来进行索引,于是开始动手研究Ajaxtags.
Ajaxtags是基于prototype.js的简化AJAX开发的组件,可以通过标签来来完成以前非常复杂的事情.
通过DOME和原代码的分析,我感觉,他的简化过于局限,没有非常好扩展性,只能做一些简单的处理,比方他的AjaxXmlBuilder的toString()方法可以返回一种简单的XML格式,而且过于简单:

<? xml version="1.0" encoding="UTF-8" ?>
< ajax-response >
   < response >
     < item >
       < name > Record 1 </ name >
       < value > 1 </ value >
     </ item >
     < item >
       < name > Record 2 </ name >
       < value > 2 </ value >
     </ item >
     < item >
       < name > Record 3 </ name >
       < value > 3 </ value >
     </ item >
   </ response >
</ ajax-response >

他在autocomplete处理时会用到这中XML文件:
以下是在他的JS中解析XML的部分

      var  name  =  items[i].getElementsByTagName( " name " )[ 0 ].firstChild.nodeValue;
       var  value  =  items[i].getElementsByTagName( " value " )[ 0 ].firstChild.nodeValue;

由此可以看出他过于简单,如果我有多个属性需要放入自动下拉菜单中怎么办?
好办,我们扩展!
自己造一个AjaxXmlBuilder,继承一下就可以了,把toString()方法重载掉~让他组一个我要的XML文件出来,然后再到页面上自己解吸他`就OK了~
我的类:

package  com.kaiwang.mmis.ajax.autoselect;

import  java.lang.reflect.InvocationTargetException;
import  java.util.ArrayList;
import  java.util.Collection;
import  java.util.Iterator;
import  java.util.List;

import  org.ajaxtags.helpers.AjaxXmlBuilder;
import  org.apache.commons.beanutils.BeanUtils;

/** */ /**
 * 重载ajaxxmlbuilder封装出新的xml文件
 * @author Gary.lee Jan 16, 2006
 */
public   class  ManufacturerXmlBuilder  extends  AjaxXmlBuilder  implements  MisAjaxXmlBuilder   {
    
    private String encoding = "UTF-8";
    private List items = new ArrayList();
    
    public ManufacturerXmlBuilder addItems(Collection collection, String nameProperty, String valueProperty, String seachCodeProperty) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException {
        for (Iterator iter = collection.iterator(); iter.hasNext();) {
            Object element = (Object) iter.next();
            String name = BeanUtils.getProperty(element, nameProperty);
            String value = BeanUtils.getProperty(element, valueProperty);
            String seachCode = BeanUtils.getProperty(element, seachCodeProperty);
            items.add(new MisAjaxBaseItem(name, value, seachCode));
          }
        return this;
    }

    /** *//**
     * @see java.lang.Object#toString()
     */
    public String toString() {
      StringBuffer xml = new StringBuffer().append("<?xml version=\"1.0\"");
      if (encoding != null) {
        xml.append(" encoding=\"");
        xml.append(encoding);
        xml.append("\"");
      }
      xml.append(" ?>");

      xml.append("<ajax-response>");
      xml.append("<response>");
      for (Iterator iter = items.iterator(); iter.hasNext();) {
       MisAjaxBaseItem item = (MisAjaxBaseItem) iter.next();
      xml.append("<item>");
      xml.append("<name>"); 
      xml.append("<![CDATA[");
      xml.append(item.getName());
      xml.append("]]>");
      xml.append("</name>");
      xml.append("<value>");
      xml.append("<![CDATA[");
      xml.append(item.getId());
      xml.append("]]>");
      xml.append("</value>");
      xml.append("<searchcode>");
      xml.append("<![CDATA[");
      xml.append(item.getSearchCode());
      xml.append("]]>");
      xml.append("</searchcode>");
        xml.append("</item>"); 
      }
      xml.append("</response>");
      xml.append("</ajax-response>");
      return xml.toString();
    }
}

这样就有了我要的XML文件格式了~再修改JS

       var  name  =  items[i].getElementsByTagName( " name " )[ 0 ].firstChild.nodeValue;
       var  value  =  items[i].getElementsByTagName( " value " )[ 0 ].firstChild.nodeValue;
      
       // 新增加一个searchcode部分的解析
       var  searchCode  =  items[i].getElementsByTagName( " searchcode " )[ 0 ].firstChild.nodeValue;
      
       var  li  =  document.createElement( " li " );
       var  liIdAttr  =  document.createAttribute( " id " );
      li.setAttribute( " id " , value);
       // 将searchcode部分+name输出到文本区域中
       var  liText  =  document.createTextNode(name + '(' + searchCode + ')');

大家可以看到,我加入了一个 searchCode的东西就是在下拉框中把searchCode打印出来!
效果~~~~~~我抓张图出来看看:

样子还可以吧`!
用过autocomplete的朋友应该知道如果仅仅是鼠标点击以后这个框是不会出来了~
因为他默认的事件是"keyup",也就是当有输入的时候才出来.初始化的部分在JS中:

 setOptions:  function (options)  {
    this.options = {
      sourceElem: $(options.source),
      targetElem: $(options.target),
      eventType: options.eventType ? options.eventType : "keyup",
      appendValue: evalBoolean(options.appendValue),
      appendSeparator: options.appendSeparator || " ",
      forceSelection: evalBoolean(options.forceSelection)
    }.extend(options || {});

而且这里如果换成"force"的话,在下拉框中的上下键和回车就失效了,没关系!解决了!在调用的时候把 eventType:"focus"   加上（这个属性官方文档中并没有说～）然后找到：

 attachBehaviors:  function (element, event, listener, obj)  {
    if (isArray(element)) {
      for (var i=0; i<element.length; i++) {
        eval("element[i].on"+event+" = listener.bindAsEventListener(obj)");
      }
    } else {
      eval("element.on"+event+" = listener.bindAsEventListener(obj)");
      eval("element.onkeyup = listener.bindAsEventListener(obj)");
    }
  }

大家可以看到我在下面又追加了一个“keyup”的属性，这样既在得到焦点的时候可以出来，也可以在用上下建的时候选择，还可以做筛选～还有就是我没有实用标签，我读了它的DOME以后发现它仅仅是封装了JS而已，用了标签以后感觉怪怪的，为什么JS的调用也要用标签封装呢？仅仅是可以在标签中实用EL语法·但是又有多少兄弟会用呢？最主要的是它的标签中好想没有“eventType”这个属性～，看看我的调用：

// 班站编号
new  AjaxJspTag.Autocomplete( " <%=request.getContextPath()%>/autoSelectTeam.do " ,  {
                                            parameters:"team={team_Name},depId={department_Id}",
                                            progressStyle:"throbbing",
                                            target:"team_Id",
                                            className:"autocomplete",
                                            source:"team_Name",
                                            forceSelection:"yes",
                                            eventType:"focus"            
} );

要注意的是parameters这里多参数实用了,号隔开，这样到ACTION中就可以用depId接到值了～这个东西在官方文档中也没有说出来，还是同事发现的～!

本人文采不行``大家见谅，希望文章对用ajaxTags的朋友有写帮助，我的原则就是·能改的我都改·只要我能用就可以了！

我再改~前面说了,我修改了AJAX基本的JS文件``但是他的其他属性就不能用了~~~很痛苦,所以晚上突然想到,我专门为他加一个方法就可以了~

// 事件触发（修改增加一个keyup事件auto专用）
  attachBehaviorsAuto:  function (element, event, listener, obj)  {
      eval("element.on"+event+" = listener.bindAsEventListener(obj)");
      eval("element.onkeyup = listener.bindAsEventListener(obj)");
  }

再改一下`他调用的地方,换成这个方法就好了`噎!