Question

我对C＃.Net Textbox textchanged事件，AJAX和AutoComplete（https://github.com/devbridge/jQuery-Autocomplete）

有一个非常讨厌的问题

我有一个文本框＆＃34;航班号＆＃34;自动完成功能。一旦选择了建议，我就会想要使用AJAX并更新＆＃34;离境机场＆＃34; （DDL）和＆＃34;目的地机场＆＃34; （DDL）。

问题：当我从自动完成中选择任何建议时，航班号不会回复所选的建议值。例如，如果我输入＆＃34; G91＆＃34;，然后点击＆＃34; G9101＆＃34;，＆＃34; G9101＆＃34;将在瞬间显示在航班号文本框上，然后重置为＆＃34; G91＆＃34;因为AutoPostBack。我怎样才能让它回复建议值？

更新：我解决了问题，但在第一篇文章回复后，自动完成功能无效。

航班号文本框

<div class="split half last">
                <label for="calculator-flight-number">
                    Flight Number</label>
                <asp:UpdatePanel ID="UpdatePanel7" runat="server">
                    <ContentTemplate>
                        <div id="autocomplete-wrap" class="autocomplete-wrap">
                            <asp:TextBox ID="tbFlightNumber" runat="server"  ClientIDMode="Static" CssClass="fill" ontextchanged="tbFlightNumber_TextChanged" AutoPostBack="true"></asp:TextBox>
                        </div>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="bnCalculate" EventName="Click" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>

机场DDL

<div class="split fill last">
                <label class="fill" for="calculator-departure">
                    Departure</label>
                <asp:UpdatePanel ID="UpdatePanel13" runat="server">
                    <ContentTemplate>
                        <asp:DropDownList ID="ddlDepartureAirport" CssClass="split threequarters" runat="server">
                        </asp:DropDownList>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="bnCalculate" EventName="Click" />
                        <asp:AsyncPostBackTrigger ControlID="tbFlightNumber" EventName="TextChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
            <div class="split fill last">
                <asp:UpdatePanel ID="UpdatePanel14" runat="server">
                    <ContentTemplate>
                        <asp:DropDownList ID="ddlDestinationAirport" CssClass="split threequarters" runat="server">
                        </asp:DropDownList>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="bnCalculate" EventName="Click" />
                        <asp:AsyncPostBackTrigger ControlID="tbFlightNumber" EventName="TextChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>

的Javascript

<script type="text/javascript">
var options, a;
jQuery(function () {
    options = {
        serviceUrl: '/Service/FlightSector',
        appendTo: 'div#autocomplete-wrap' 
    };
    console.log($('#tbFlightNumber'));
    a = $('#tbFlightNumber').autocomplete(options);
});

第一次尝试：

我做了通常的AJAX方式，并为Flight Number做了TextChanged事件。我希望当我点击AutoComplete的建议时，AJAX会启动并更新2个机场。 AJAX没有开火。我打开了＃34; AutoPostBack＆＃34;对于航班号，只返回整个建议框中的第一个字符。对于例如如果＆＃34; G＆＃34;是类型，建议会显示＆＃34; G1002＆＃34;。当从自动填充中选择G1002作为选择时，只会回发G。

第二次尝试：

我使用了javascript＆＃34; OnBlur＆＃34;方法并手动处理回发。

//for flight number postback
protected void Page_Init(object sender, EventArgs e)
{
    var onBlurScript = Page.ClientScript.GetPostBackEventReference(tbFlightNumber, "OnBlur");
    tbFlightNumber.Attributes.Add("onblur", onBlurScript);
}

private void HandleCustomPostbackEvent(string ctrlName, string args)
{
    //Since this will get called for every postback, we only
    // want to handle a specific combination of control
    // and argument.
    if (ctrlName == tbFlightNumber.UniqueID && args == "OnBlur")
    {
        string flightNumber = tbFlightNumber.Text;
        ....
        //update 2 airports DDL
    }
}

这不起作用，因为我无法让AJAX注册2个下拉列表的触发器。此外，选择自动完成建议会触发＆＃34; onblur＆＃34;。

第3次尝试：我尝试使用onfocus代替下一个字段，但它的工作原理并不相同。

我有点困在这里，有人能告诉我一些指示吗？ TIA。

Answer 1

如果您使用的是更新面板，那么您将遇到问题，在第一次服务器调用后它将无法运行。要解决此问题，您需要添加PageRequestManager PageLoad Event以再次加载内容。

在标记添加之前添加页面底部：

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(AddHandler);
function AddHandler(sender,args)
{
var options = {
        serviceUrl: '/Service/FlightSector',
        appendTo: 'div#autocomplete-wrap' 
    };
    console.log($('#tbFlightNumber'));
    var a = $('#tbFlightNumber').autocomplete(options);
}

希望这应该有用。

我遇到了同样的问题，这就是我解决问题的方法。

如何在c＃.net AJAX textbox textchanged事件中使用自动完成功能？

1 个答案: