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

我定义了一个ASP.NET表单，其中包括以下表单元素：

TextBox

、

HiddenField

和

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>

\u hdnda

和

\txtData

通过javascript/JQuery以以下方式提供：

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

[原代码]

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

            source_widget.autocomplete({
                source: datafromServer,
                select: function (event, ui) {
                    var _data = ui.item.value;

                    var _tokens = _data.split("\t");


                    if (_tokens.length < 3)
                        return;

                    var _value = _tokens[_tokens.length - 1].replace(']', '').replace('[', '');

                    dest_widget.val(_value).closest("form").submit();
                }
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
}

var\u hdnda=null；
var_txtData=null；
$（函数（）{
_hdnda=$（“输入[id$=”\u hdnda']）；
_txtData=$（“输入[id$=''txtData']”）；
GetData（_txtData，_hdnda）；
});
函数GetData（源程序、目标程序）{
$.ajax({
类型：“POST”，
url:“/Service/WSDataService.asmx/GetData”，
数据类型：“json”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（数据）{
var datafromServer=data.d.split（
）；
source\u widget.autocomplete({
来源：datafromServer，
选择：功能（事件、用户界面）{
var _data=ui.item.value；
var_标记=_data.split（“\t”）；
如果（_tokens.length<3）
返回；
var _value=_tokens[_tokens.length-1]。替换（']'，''）。替换（'[''，''）；
dest_widget.val（_value）.closest（“表单”）.submit（）；
}
});
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
警报（文本状态）；
}
});
}

[JQuery优化代码由@Tomalak提供]

var _hdnData = null;
var _txtData = null;

$.postJSON = function (url, data, success) {
    return $.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        success: success || null
    });
};

var raw_data = $.postJSON("/Service/WSDataService.asmx/GetData", {})
    .then(function (data) {
        return data.d.split("<br />");
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    });

$(function () {
    raw_data.done(function (items) {
        $("input[id$='_txtData']").autocomplete({
            source: items,
            select: function (event, ui) {
                var _data = ui.item, _value;

                // calculate _value ...
                $("input[id$='_hdnData ']")
                    .val(_value)
                    .closest("form").submit();
            }
        });
    });
});

var\u hdnda=null；
var_txtData=null；
$.postJSON=函数（url、数据、成功）{
返回$.ajax({
类型：“POST”，
url:url，
数据：JSON.stringify（数据），
contentType:“应用程序/json；字符集=utf-8”，
成功：成功| |空
});
};
var raw_data=$.postJSON（“/Service/WSDataService.asmx/GetData”，{}）
.then（功能（数据）{
返回数据.d.split（
）；
})
.fail（函数（XMLHttpRequest、textStatus、errorshown）{
警报（文本状态）；
});
$（函数（）{
原始数据。完成（功能（项目）{
$（“输入[id$=”\U txtData']）。自动完成({
资料来源：项目，
选择：功能（事件、用户界面）{
var _data=ui.item，_值；
//计算_值。。。
$（“输入[id$=''U hdnda']”）
.val（_值）
.最近的（“表格”）。提交（）；
}
});
});
});

当JQuery

autocomplete

的select事件发生时，表单被提交，一旦重新加载，我注意到两个主要问题：

\u txtData

设置为用户在选择事件发生时输入的部分值（即不是

自动完成

菜单上选择的/可见的实际值）

\u ddlData

选择事件之前存在的值与来自其数据源的新数据合并

---

顺便说一句，我现在不希望更改

SQLDataSource

或使用更新的范例（如Microsoft Entities Framework）的数据绑定组件。

您有一个时间问题，如中

您提交表单是作为

select

事件的一部分。所选值在

select

事件后由jQuery UI写入表单字段，但此代码从未运行。

.closest（“表单”）.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);
}

---

如果我需要使用autocomplete进行即时过滤怎么办？@weirdgyn然后您可以调用

$form.submit（）；

在自动完成的成功回调中。我的意思是，我需要在ajax调用中过滤数据。上次编写的代码是在用户使用自动完成绑定小部件执行操作之前获取数据。@weirdgyn这不会更改我的答案。自动完成小部件将有一个成功回调（在jQuery UI自动完成中，它是。您需要在回调中调用

$form.submit（）

，即在您收到自动完成响应并将收到的值写入表单字段后，才能使用表单POST进行传输。可能我对我的JQuery不了解，但我很高兴这段代码不支持服务器端筛选（没有一些修改）。也许我的问题不清楚。我需要以这种方式更新它。在页面加载时，Ajax调用开始从Web服务请求数据，但考虑到数据量，我得到了一个错误…我找到了一个实现服务器端过滤的解决方案（即更改源：使用Ajax调用的项）但是我不能在这个代码上做同样的事情。