如何使用c＃.net AJAX textbox textchanged事件自動完成？

Question

我在使用C＃.NET文本框TextChanged事件，AJAX和自動完成（https://github.com/devbridge/jQuery-Autocomplete）

一個非常討厭的問題，我有一個文本框「航班號」與自動完成功能。一旦選擇了一個建議，我想使用AJAX並更新「出發機場」（DDL）和「目的地機場」（DDL）。

問題：當我從自動完成中選擇任何建議時，航班號不會回發選定的建議值。例如，如果我輸入「G91」，然後單擊「G9101」，「航班號」文本框中將出現「G9101」，然後由於AutoPostBack而重置爲「G91」。我如何讓它回發建議值？

UPDATE：我解決了它，但在第一次回發之後AutoComplete不起作用。

航班號文本

<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沒有開火。我打開了航班號的「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。

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

但願這應該工作。

我有同樣的問題，這就是我已經解決了我的問題。