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

时间:2012-05-01 12:38:01

标签: jquery-ui jquery jquery-ui-autocomplete

我正在使用jQueryUI自动完成功能,以前曾多次使用它,但我现在有了更复杂的要求。

我有一个可变数量的自动填充字段来设置,使用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参数生成第一个自动填充字段。

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

因此,我的第一次自动完成功能的AJAX网址如下所示     http://foo.com/AJAXCheckCode.asp?actionType=List&GUID= {838138D6-A329-40F1-924B-58965842ECF8}&安培; inCode = ES&安培;法菜单= A3&安培; _ = 1335875408670

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

希望这有一定意义!

1 个答案:

答案 0 :(得分:2)

最后解决方法是在文本框中添加一个类,然后在任何文本框中使用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) {

        }
    });
});