jQueryUI 自动完成 - 多个控件 - 一个功能

Question

我用的是jQueryUI自动补全，之前用过很多次，但我现在有一个更复杂的需求。

我使用 JSON 数据源设置可变数量的自动完成字段，并希望使用 $().each 来设置这些字段。问题似乎出在数据上：AJAX 调用的属性始终默认为我设置的最终自动完成值。

$('[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 参数生成第一个自动完成字段。

我宁愿不为最多 4 x 6 的自动完成文件编写代码，并尝试创建一个函数来设置所有字段，这可能吗？

因此我的第一个自动完成的 AJAX URL 看起来像这样 http://foo.com/AJAXCheckCode.asp?actionType=List&GUID={838138D6-A329-40F1-924B-58965842ECF8}&inCode=es&inType=A3&_=1335875408670

“inType”实际上应该是 A2，而不是 A3，它是外部 $.each() 的最后一项

希望这有点道理！

Answer 1

最终通过在文本框中添加一个类，然后在具有给定类但之前未绑定的任何文本框上使用 live() 来解决......很有魅力

$('.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) {

        }
    });
});