jQueryUI Autocomplete - Multiple controls - One function - jquery-ui

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!

Answer 1

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) {
}
});
});