jQueryUI Autocomplete won't close on select - jquery-ui

Question

I'm pretty new to jQuery and UI, and I'm having two issue with the autocomplete, and I suspect they're related. When I select an item in the list, the value, not the label, is displayed in the input. Second, the autocomplete will not close. When I step through my code, the select function gets called, and I see my label, not the value, displayed in the input, as I want. Unfortunately, the close function gets called (twice), and the ui.item.value replaces the label in the input and the autocomplete doesn't close.
My autocomplete code, along with the input HTML, is below. If it matters, the autocomplete is nested in a jQueryUI dialog.
HTML:
<input id="id_projectid" type="text" class="projEntryControl ui-autocomplete-input ui-corner-all" name="projectid" autocomplete="off"></input>
AutoComplete:
$('#id_projectid').autocomplete({
source: function(request, response) {
$.ajax({
url: "/chargeback/projList/" + $('#id_departmentid').val(),
dataType:"json",
data: {
project_startsWith: request.term
},
success: function(data) {
response( $.map( data.results, function( item ) {
return {
label: item.projectName,
value: item.id
}
}));
}
});
},
minLength: 3,
select: function(event, ui) {
$('#id_projectid').val(ui.item.label);
},
open: function() {
$( '#id_projectid' ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
EDIT: Adding more code as requested.
Here's the javascript that sets up the dialog, and connects the buttons to open the dialog
function setupProjectEntryDialog() {
$( "#addPEForm" ).dialog({
autoOpen: false,
height: 490,
width: 376,
modal: true,
buttons: {
"Save": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkRegexp( hrsWorked, /^(?!\d{3})(?![2-9]\d)(?!1[1-9])(10|[1-9]{1})(.\d{0,2})?$/, "Please enter a valid number of hours worked." );
if ( bValid ) {
//save the changes to the database
var dataArray = $("#peUpdateForm").serializeArray();
var ed = new Object();
ed.name = "entryDateId";
ed.value = $("#entryDateId").text();
dataArray.push(ed);
if ($("#projEntryId").val() != "") {
var pe = new Object();
pe.name = "projEntryId";
pe.value = $("#projEntryId").val();
dataArray.push(pe);
}
$.post('/chargeback/savepe/', dataArray, function(data){
alert(data.msg);
//reload the project entries and total hours worked
showProjectEntries($('.entryDate.selected'));
getTotalHoursForEntryDate($('.entryDate.selected'));
}, "json");
//close the window
$( this ).dialog( "close" );
$('#id_projectid').autocomplete("destroy");
}
},
Cancel: function() {
$( this ).dialog( "close" );
$('#id_projectid').autocomplete("destroy");
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
//connect the add new button
$("#addNewPEButton").click(function() {
$( "#addPEForm" ).dialog( "open" );
});
//hook up the add new project entry form submittal
$("#addNewPE").submit(function() {
addProjectEntry($(this));
return false;
});
//connect the delete Project Entry button
$('#deletePEButton').click(function() {
deleteProjectEntry($('.peRow.selected'));
return false;
});
//connect the row click method to the function
$('.peRow').click(function() {
peRowWasClicked($(this));
});
$('.peRow').dblclick(function() {
peRowWasDoubleClicked($(this));
})
}
Here's the javascript that loads the Dialog using a Django form and template to generate the HTML.
function addProjectEntry(anED) {
//ensure all peRows are not selected and disable the delete project entry button
$('.peRow').removeClass('selected');
$('#deletePEButton').attr('disabled', true);
//disable newFavoriteFromPEButton
$('#newFavoriteFromPEButton').attr('disabled', true);
//get the id of the selected entry date and strip the ed_ from it
$selectedED = $(".entryDate.selected");
var edId = $selectedED[0].id.split("_");
$("#addPEForm").load("/chargeback/cb_timeentry/newPE/" + edId[1], function() {
//connect the variables to the newly loaded html
connectDialogVariables();
//connect the project filtering to the department change
/*$("#id_departmentid").change(function() {
getProjectsForDepartment();
});*/
//connect the project and program number autocompletes to the controls
$('#id_projectid').autocomplete({
source: function(request, response) {
$.ajax({
url: "/chargeback/projList/" + $('#id_departmentid').val(),
dataType:"json",
data: {
project_startsWith: request.term
},
success: function(data) {
response( $.map( data.results, function( item ) {
return {
label: item.projectName,
value: item.id
}
}));
}
});
},
minLength: 3,
select: function(event, ui) {
$('#id_projectid').val(ui.item.label);
$(this).close();
return false;
},
open: function() {
$( '#id_projectid' ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
}
This is the HTML after the ajax call completes, and the above javascript completes. The autocomplete begins the search when typing in the correct text input, and is positioned correctly, but isn't part of the form.
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable ui-dialog-buttons" style="outline: 0px none; z-index: 1002; position: absolute; height: auto; width: 376px; top: 66px; left: 297.5px; display: block;" tabindex="-1" role="dialog" aria-labelledby="ui-id-9">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-9" class="ui-dialog-title">Project Entry Update</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>
</div>
<div id="addPEForm" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 367px;" scrolltop="0" scrollleft="0"><form action="" id="peUpdateForm" method="post">
<div style="display:none"><input type="hidden" value="BTrLZBVfA2ltExq3OUU5015BVxPKO9lL" name="csrfmiddlewaretoken"></div>
<p><label for="id_departmentid">Department:</label>
<select name="departmentid" class="projEntryControl" id="id_departmentid">
<option selected="selected" value="">Choose a Department</option>
<option value="1">ABND</option>
<option value="2">ATT</option>
<option value="3">AVI</option>
<option value="4">CCS</option>
<option value="5">PBW</option>
</select></p>
<p>
<label for="id_projectid">Project:</label>
<input type="text" name="projectid" class="projEntryControl ui-autocomplete-input" id="id_projectid" autocomplete="off">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
</p>
<p>
<label for="id_progNumId">Program Number:</label>
<input type="text" name="progNumId" class="projEntryControl" id="id_progNumId">
</p>
<p>
<label for="id_hoursWorked">Hours Worked:</label>
<input type="text" id="id_hoursWorked" maxlength="5" class="projEntryControl" value="0.0" name="hoursWorked">
</p>
<p>
<label for="id_notes">Notes:</label>
<textarea name="notes" cols="40" rows="10" id="id_notes"></textarea
</p>
<p style="display:none;" id="entryDateId">1</p>
<p style="display:none;" id="projEntryId"></p>
</form>
</div>
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;">
</div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Save</span>
</button>
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Cancel</span>
</button>
</div>
</div>
</div>
<div class="ui-widget-overlay" style="width: 979px; height: 567px; z-index: 1001;"></div>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-11" tabindex="0" style="z-index: 1003; display: none;">
</ul>