javascript 强制 ASP.NET 表单重新加载与 JQuery 自动完成文本框填充冲突？

Question

我定义了一个 ASP.NET 表单，其中包含以下表单元素： a TextBox、 anHiddenField和 a ，DropDownList定义如下：<asp:TextBox ID="_txtData" runat="server" ClientIDMode="Static" /><asp:HiddenField ID="_hdnData" runat="server" ClientIDMode="Static" Value="" /><asp:DropDownList ID="_ddlData" runat="server" DataSourceID="_sdsData" DataTextField="data" DataValueField="id" AppendDataBoundItems="true" AutoPostBack="true" >    <asp:ListItem Text="TUTTI" Value="" Selected="True" /></asp:DropDownList>_ddlData由以这种方式定义的数据源提供：<asp:SqlDataSource    ID="_sdsData"     runat="server"    ConnectionString="<%$ ConnectionStrings:db %>"    ProviderName="<%$ ConnectionStrings:db.ProviderName %>"    SelectCommand="        SELECT             id,             data        FROM             table_data        WHERE             (@id IS NULL) OR (id = @id)        ORDER BY targa">        <SelectParameters>            <asp:ControlParameter                 ControlID="_hdnData"                 PropertyName="Value"                 Direction="Input"                 ConvertEmptyStringToNull="true"                 DbType="Int32"                 DefaultValue=""                 Name="id" />        </SelectParameters></asp:SqlDataSource> _hdnData并_txtData通过 javascript/JQuery 以这种方式提供：[原代码]var _hdnData = null;var _txtData = null;$(function () {    _hdnData = $("input[id$='_hdnData']");    _txtData = $("input[id$='_txtData']");    GetData(_txtData , _hdnData );});function GetData(source_widget, dest_widget) {    $.ajax({        type: "POST",        url: "/Service/WSDataService.asmx/GetData",        dataType: "json",        data: "{}",        contentType: "application/json; charset=utf-8",        success: function (data) {            var datafromServer = data.d.split("<br />");当 JQuery 的 select 事件autocomplete发生时，表单被提交，一旦重新加载，我注意到两个主要问题：_txtData设置为发生选择事件时用户输入的部分值（即不是菜单上选择/可见的实际值autocomplete）_ddlData选择事件之前存在的值将与来自其数据源的新数据合并。顺便说一句，我目前不想SQLDataSource用更新的或更新的范例（如 Microsoft 实体框架）更改或数据绑定组件。

Answer 1

你有一个时间问题。

您将提交该表单作为select活动的一部分。事件发生后，所选值将由 jQuery UI 写入表单字段select，但此代码永远不会运行。立即重新加载.closest("form").submit()页面。此时，自动完成字段仍然只包含用户输入的内容。

对此的快速而肮脏的解决方案是在短暂延迟后发送表单，以便让其他事件有机会完成。

// ... 

select: function (event, ui) {

    var _data = ui.item,

        _value,

        $form = $(this).closest("form");

    // calculate _value ...

    $("input[id$='_hdnData ']").val(_value);

    setTimeout(function () { $form.submit(); }, 50);

}