如何将自动完成功能与 c#.net AJAX 文本框 textchanged 事件一起使用？答案

【问题标题】：How can I use Autocomplete with c#.net AJAX textbox textchanged event?如何将自动完成功能与 c#.net AJAX 文本框 textchanged 事件一起使用？
【发布时间】：2014-05-15 16:03:12
【问题描述】：

我在 C#.Net Textbox textchanged 事件、AJAX 和 AutoComplete (https://github.com/devbridge/jQuery-Autocomplete) 方面遇到了一个非常糟糕的问题

我有一个具有自动完成功能的文本框“航班号”。选择建议后，我想使用 AJAX 并更新“出发机场”（DDL）和“目的地机场”（DDL）。

问题：当我从自动完成中选择任何建议时，航班号不会与所选建议值一起回传。例如，如果我输入“G91”，然后单击“G9101”，“G9101”将出现在“航班号”文本框中一瞬间，然后由于 AutoPostBack 重置为“G91”。如何让它回发建议的值？

更新：我解决了，但第一次回帖后自动完成功能不起作用。

航班号文本框

<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 方式，并为航班号进行了 TextChanged 事件。我希望当我单击 AutoComplete 的建议时，AJAX 会触发并更新 2 个机场。 AJAX 没有触发。我为航班号打开了“AutoPostBack”，并且只回发了整个建议框中的第一个字符。例如如果“G”是类型，建议将显示“G1002”。当 G1002 作为自动完成的选择被点击时，只有 G 会被回发。

第二次尝试：

我使用 javascript "OnBlur" 方法并手动处理回帖。

//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 个下拉列表注册触发器。此外，选择自动完成建议会触发“onblur”。

第三次尝试：我尝试使用 onfocus 代替下一个字段，但原因相同。

我有点卡在这里，谁能给我一些指示？ TIA。

【问题讨论】：

发布 html 和 javacript 代码
用前端 AJAX 元素和 javascript 更新了代码。
您的 jquery 自动完成功能无法正常工作：
jquery 自动完成功能运行良好。只是一旦点击建议，我就无法让它自动加载机场。
你选择的自动完成事件在哪里

标签： c# jquery events autocomplete

【解决方案1】：

如果您使用的是更新面板，那么您将遇到问题，并且在第一次服务器调用后它将无法工作。要解决这个问题，您需要添加 PageRequestManager PageLoad 事件来重新加载内容。

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

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

希望这应该可行。

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

【讨论】：