Javascript噩梦－Ajax实现输入提示的调整与配置

经过一个星期的煎熬，终于把基于Ajax的输入提示功能实现了。太痛苦了，写Javascript的感觉就跟用NotePad来写代码一样，没有智能提示、弱类型、难调试……总之是太折磨人了。
本来自己写了一个比较简单的，但是由于我的页面上需要多个输入框，还要可以动态增加输入框，要把传回来的结果set入多个输入框，由于是使用的Struts标签库，<html:text>还没有id属性，让这个问题复杂了不少。
需求是这样的：
有一个页面，需要录入货品信息，货品有id,编号，名称，单位，单价，规格等属性，每个货品信息在表格中有一行，一行中有多个输入框，用于输入货品信息。在输入货品编号的时候，应该访问后台的商品信息库，寻找以前是否有输入过该编号的货品，如果有，把编号返回。支持用鼠标点击，键盘回车等方法选择货品，选择后应该把货品信息显示到各个输入框中供用户修改。如果该货品在商品信息库中标记为敏感商品，要作出提示。一个编号可以有多个货品。
改了3天代码，终于决定破釜沉舟，删掉重做。修改了《Ajax in Action》中的代码，Ajax in Action中的代码有些地方有错误，不仔细检查一遍还真不太容易发现。书中后台使用C#,前台是使用Rico来向某个url传参数的形式进行Ajax通信。返回的response类似：

< ajax-response >
   < response  type ='object'  id ='field1_updater'>
     <matches >
       < text > XXX </ text >
       < value > XXX </ value >
     </ matches >
   </ response >
</ ajax-response >

不过我不想写JSP或者Servlet，所以用了DWR，直接用spring中的BO把结果传回来：

cargobaseService.getByNumberAndCompany( this .lastRequestString, this .company, function (ajaxResponse) {
//
} );

cargobaseService是使用DWR创建的Javascript对象：
dwr.xml:

< dwr >
   < allow >
     < create  creator ="spring"  javascript  = "cargobaseService" >
         < param  name ="beanName"  value ="cargobaseService" />
     </ create >
     < convert  match ="com.gdnfha.atcs.cargobase.model.*"  converter ="bean" ></ convert >
   </ allow >
</ dwr >

返回为下面对象的数组

var  cargoModel  =   {
  cargoCompany: XXX,
  cargoCurrency: XXX,
  cargoDestination: XXX,
  cargoId: XXX,
  cargoImpose: XXX,
  cargoName: XXX,
  cargoNumber: XXX,
  cargoSize: XXX,
  cargoUnit: XXX,
  cargoUnitPrice: XXX,
  sensitive: true|false
}

 Javascript代码如下：

TextSuggest  =  Class.create();

TextSuggest.prototype  =   {
    //构造函数
   initialize: function(anId,company, url, options) {
      this.id          = anId;
      this.company = company;
      var browser = navigator.userAgent.toLowerCase();
      this.isIE        = browser.indexOf("msie") != -1;
      this.isOpera     = browser.indexOf("opera")!= -1;
      this.textInput   = $(this.id);
      this.suggestions = new Array();
      this.setOptions(options);
      this.injectSuggestBehavior();
   },
    //设置参数
   setOptions: function(options) {
      this.options = {
         suggestDivClassName: 'suggestDiv',
         suggestionClassName: 'suggestion',
         matchClassName     : 'match',
         matchTextWidth     : true,
         selectionColor     : '#b1c09c',
         matchAnywhere      : false,
         ignoreCase         : false,
         count              : 10
      }.extend(options || {});
   },
    //注入输入提示行为
   injectSuggestBehavior: function() {

      if ( this.isIE )
         this.textInput.autocomplete = "off";
    //创建控制器
      var keyEventHandler = new TextSuggestKeyHandler(this);
      //主要是为了避免在按回车的时候把表单提交
      new Insertion.After( this.textInput,
                           '<input type="text" id="'+this.id+'_preventtsubmit'+'" style="display:none"/>' );
      new Insertion.After( this.textInput,
                           '<input type="hidden" name="'+this.id+'_hidden'+'" id="'+this.id+'_hidden'+'"/>' );
    //创建div层
      this.createSuggestionsDiv();
   },
    //处理输入信息
   handleTextInput: function() {
     var previousRequest    = this.lastRequestString;
     this.lastRequestString = this.textInput.value;
     if ( this.lastRequestString == "" )
        this.hideSuggestions();
     else if ( this.lastRequestString != previousRequest ) {
         //访问数据源
        this.sendRequestForSuggestions();
     }
   },
    //选择框上移
   moveSelectionUp: function() {
      if ( this.selectedIndex > 0 ) {
         this.updateSelection(this.selectedIndex - 1);
      }
   },
    //选择框下移
   moveSelectionDown: function() {
      if ( this.selectedIndex < (this.suggestions.length - 1)  ) {
         this.updateSelection(this.selectedIndex + 1);
      }
   },
    //更新当前选择信息
   updateSelection: function(n) {
      var span = $( this.id + "_" + this.selectedIndex );
      if ( span ){
          //消除以前的样式
         span.style.backgroundColor = "";
      }
      this.selectedIndex = n;
      var span = $( this.id + "_" + this.selectedIndex );
      if ( span ){
          //更新新样式
         span.style.backgroundColor = this.options.selectionColor;
      }
   },
    //发送请求
   sendRequestForSuggestions: function() {
     if ( this.handlingRequest ) {
        this.pendingRequest = true;
        return;
     }

     this.handlingRequest = true;
     this.callDWRAjaxEngine();
   },

    //使用DWR访问后台
   callDWRAjaxEngine: function() {
           //保存当前对象指针
           var tempThis = this;
           cargobaseService.getByNumberAndCompany(this.lastRequestString,this.company,function(ajaxResponse){
            tempThis.suggestions = ajaxResponse;
              if ( tempThis.suggestions.length == 0 ) {
                 tempThis.hideSuggestions();
                 $( tempThis.id + "_hidden" ).value = "";
              }else {
                 tempThis.updateSuggestionsDiv();
                 tempThis.showSuggestions();
                 tempThis.updateSelection(0);