jQueryUI自动完成不会在select上关闭

时间：2012-12-07 21:43:03

标签： jquery-ui jquery-ui-autocomplete

我对jQuery和UI很陌生，我对自动完成有两个问题，我怀疑它们是相关的。当我在列表中选择一个项目时，输入中会显示值，而不是标签。其次，自动完成功能不会关闭。当我单步执行代码时，select函数被调用，我看到我的标签，而不是输入中显示的值，如我所愿。不幸的是，close函数被调用（两次），ui.item.value替换输入中的标签，自动完成不会关闭。

我的自动填充代码以及输入HTML如下所示。如果重要，自动完成将嵌套在jQueryUI对话框中。

HTML：

<input id="id_projectid" type="text" class="projEntryControl ui-autocomplete-input ui-corner-all" name="projectid" autocomplete="off"></input>

自动完成：

    $('#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" );
        }
    });

编辑：根据要求添加更多代码。

这是设置对话框的javascript，并连接按钮以打开对话框

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

这是使用Django表单和模板加载Dialog以生成HTML的javascript。

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

这是ajax调用完成后的HTML，上面的javascript完成了。自动填充在键入正确的文本输入时开始搜索，并且位置正确，但不是表单的一部分。

<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>

0 个答案:

没有答案
相关问题
最新问题