2012-05-01 18 views
1

私はjQueryUIのオートコンプリートを使用していますが、以前は何度も使用していましたが、もっと複雑な要件があります。jQueryUIオートコンプリート - 複数のコントロール - 1つの関数

私は、JSONデータソースを使用して設定するために、さまざまな量のオートコンプリートフィールドを持ち、これらを設定するためにそれぞれ$()を使いたいと思います。問題はデータのように見えます:AJAX呼び出しのプロパティは常に、最終的なオートコンプリートIの設定値をデフォルトにしています。

$('[id$=CheckMethod]').each(function(index) { 

      if ($(this).val() === 'List') { 
       fieldToSetup = ($(this).attr('id').replace('txt','')); 
       fieldToSetup = left(fieldToSetup,(fieldToSetup.length - 11)); 
       alert(fieldToSetup); 

       $('#txt' + fieldToSetup + 'CodeRoom' + escape(inRoomID)).autocomplete({ 
        source: function (request, response) { 
         var src, 
          arrayData; 

         src = 'AJAXCheckCode.asp?actionType=List&GUID=' + $('#txtGUID').val(); 

         $.ajax({ 
          url: src, 
          datatype: 'json', 
          data: 'inCode=' + request.term + '&inType=' + $(this).attr('id'), 
          success: function (outData) { 
           arrayData = $.parseJSON(outData); 
           response($.map(arrayData, function (item) { 
            var theLabel = (item.Notes.length > 0) ? item.TheCode + ' - ' + item.Notes : item.TheCode; 
            return { 
             label: theLabel, 
             value: item.TheCode 
            }; 
           })); 
          } 
         }); 
        }, 
        minLength: 1, 
        open: function (event, ui) { 
         $(".ui-slider-handle ui-state-default ui-corner-all").hide(); 
         $(".ui-autocomplete.ui-menu").width(400); 
         $(".ui-autocomplete.ui-menu").css('z-index', 1000); 
        }, 
        close: function (event, ui) { 
         $(".ui-slider-handle ui-state-default ui-corner-all").show(); 
        }, 
        focus: function (event, ui) { 
         return false; 
        }, 
        select: function (event, ui) {}, 
        search: function (event, ui) { 

        } 
       }); 
      } 
     });//each CheckMethod 

このコードは、最後のフィールド設定のinTypeパラメータを使用して1番目のオートコンプリートフィールドを生成します。

私はむしろ最大4×6のオートコンプリートファイルをコーディングせず、すべてのフィールドをセットアップする機能を1つ作成しようとしていますが、これは可能ですか?

ので、私の第一オートコンプリートのための私のAJAX URLは、この http://foo.com/AJAXCheckCode.asp?actionType=List&GUID= {838138D6-A329-40F1-924B-58965842ECF8} & INCODE = ES & INTYPE = A3 & _ = 1335875408670

とき "INTYPE" は、実際にすべきのように見えますA1ではなくA2でなければなりません.each()

これはちょっと理にかなっていますか?

前にバインドされていない指定されたクラスを持つ任意のテキストボックスに)テキストボックスにクラスを追加し、(住んで使用することにより、最終的に解決
+0

ガットの作品これは、これを適応させることによって、最終的には機能します。http://stackoverflow.com/questions/4551230/bind-jquery-ui-autocomplete-using-live –

答えて

2

...魅力

$('.foo:not(.ui-autocomplete-input)').live('focus', function(){ 
    var fieldToReSource = ($(this).attr('id').replace('txt','')); 
    fieldToReSource = left(fieldToReSource,(fieldToReSource.length - 5)); 

    $(this).autocomplete({ 
     source: function (request, response) { 
      var src, 
       arrayData; 

      src = 'AJAXCheckCode.asp?inType=' + fieldToReSource + '&actionType=List&GUID=' + $('#txtGUID').val(); 
      $.ajax({ 
       url: src, 
       datatype: 'json', 
       data: 'inCode=' + request.term, 
       success: function (outData) { 
        arrayData = $.parseJSON(outData); 
        response($.map(arrayData, function (item) { 
         var theLabel = (item.Notes.length > 0) ? item.TheCode + ' - ' + item.Notes : item.TheCode; 
         return { 
          label: theLabel, 
          value: item.TheCode 
         }; 
        })); 
       } 
      }); 
     }, 
     minLength: 1, 
     open: function (event, ui) { 
      $(".ui-slider-handle ui-state-default ui-corner-all").hide(); 
      $(".ui-autocomplete.ui-menu").width(400); 
      $(".ui-autocomplete.ui-menu").css('z-index', 1000); 
     }, 
     close: function (event, ui) { 
      $(".ui-slider-handle ui-state-default ui-corner-all").show(); 
     }, 
     focus: function (event, ui) { 
      return false; 
     }, 
     select: function (event, ui) { 

      }, 
     search: function (event, ui) { 

     } 
    }); 
}); 
関連する問題