jQueryUI Autocomplete - Multiple controls - One function

Question

I am using the jQueryUI autocomplete, have used it many times before, but I now have a more complex requirement.

I have a variable amount of Autocomplete fields to setup, using a JSON datasource and want to use an $().each to set these up. The problem appears to be the data: property of the AJAX call is always defaulting to values the final Autocomplete I setup.

$('[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

This code results in the 1st Autocomplete field using the inType parameter from the last field setup.

I'd rather not code for a maximum of 4 x 6 Autocomplete fileds and am trying to create one function to setup all the fields, is this possible?

Therefore my AJAX URL for my 1st Autocomplete looks like this http://foo.com/AJAXCheckCode.asp?actionType=List&GUID={838138D6-A329-40F1-924B-58965842ECF8}&inCode=es&inType=A3&_=1335875408670

when "inType" should actually be A2, not A3 which is the last item of the outer $.each()

Hope this makes some sense!

Got this to work in the end by adapting this http://stackoverflow.com/questions/4551230/bind-jquery-ui-autocomplete-using-live — Great Big Al, May 02 '12 at 14:58

score 2 · Answer 1 · answered May 02 '12 at 15:02

Solved in the end by adding a class to the text box and then using live() on any text box with the given class that hasn't been bound before...works a charm

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

        }
    });
});

jQueryUI Autocomplete - Multiple controls - One function

1 Answers1