仅在 jQueryUI 自动完成选择事件时设置值

Question

我有一个自动完成功能，它将根据select 事件设置#resource_id 的值。如果发生select 事件，但随后用户继续编辑#resourceFile，我希望删除#resource_id 的发布（或设置为零或NULL，以便服务器知道）。

以下脚本不起作用，因为change 事件发生在select 事件之后，即使#resourceFile 以后没有更改。

如何做到这一点？

$(".addResource").click(function() {$("#dialog-addResource").dialog("open");});
$("#dialog-addResource").dialog({
    autoOpen: false, resizable:false, height: 200, width: 600, modal: true,
    open: function() {
        $('#resourceFile').val('');
        $('#resource_id').val('');
    },
    buttons: [
        {
            text: 'Save',
            click: function() {
                var data=$(this).find($('#resource_id').val()?':input':':input:not(#resource_id)').serializeArray();
                console.log(this,data)
                $.post('/pages_back/display/addResource',data,function (rsp){
                    console.log(rsp);
                    },'json');
            }
        },
        {
            text: 'Cancel',
            click    : function() {$(this).dialog("close");}
        }
    ]
});

$("#resourceFile").autocomplete({
    source: "/pages_back/display/getResources",
    minLength: 2,
    select: function( event, ui ) {
        console.log('set');
        $('#resource_id').val(ui.item.id);
    },
    change: function( event, ui ) {
        console.log('changed');
        $('#resource_id').val('');  //Is it better to set to null or use removeAttr('value')?
    }
});

.

<div id="dialog-addResource" title="Add Resource" style="display:none">
    <span>Add Resource: </span>
    <input type="text" id="resourceFile" name="file" />
    <input type="hidden" id="resource_id" name="resource_id" />
    <input type="hidden" name="page_id" value="{{ id }}" />
</div>

Answer 1

不是一个非常优雅的解决方案，但以下方法可行：

$("#resourceFile").autocomplete({
    source: "/pages_back/display/getResources",
    minLength: 2,
    select: function( event, ui ) {
        console.log('set',ui);
        $('#resources_id').val(ui.item.id).data('name',ui.item.value);
    },
    change: function( event, ui ) {
        console.log('changed');
        if($('#resources_id').data('name')!=$('#resourceFile').val()) {
            $('#resources_id').val('');  //Is it better to set to null or use removeAttr('value')?
        }
    }
});