1

コンボボックスの値が変更されたときにサーバーにポストバックしたいと思います (理想的には更新パネルで AJAX 呼び出しを使用しますが、一度に 1 つずつ)。jQuery UI AutoComplete Combobox残念ながら、ドロップダウンリストを直接変更していないため、変更イベントに干渉しています。

ここで説明されている実装を使用しています。

ここにいくつかの選択のスニペットがあります

HTML 本文コード

<span class="ui-widget">
    <asp:DropDownList ID="cboLang" runat="server" AutoPostBack="True">
        <asp:ListItem Value="ActionScript">ActionScript</asp:ListItem>
        <asp:ListItem Value="AppleScript">AppleScript</asp:ListItem>
        <asp:ListItem Value="Asp">Asp</asp:ListItem>
    </asp:DropDownList>
</span>

オートコンプリート Javascript

これは、選択が行われるたびに実行されるオートコンプリート js です。常に関数を実行します_removeIfInvalid

this._on(this.input, {
    autocompleteselect: function (event, ui) {
        ui.item.option.selected = true;
        this._trigger("select", event, {
            item: ui.item.option
        });
    },

    autocompletechange: "_removeIfInvalid"
});

サーバー側コード

Protected Sub cboLang_SelectedIndexChanged(sender As Object, e As EventArgs) _
        Handles cboLang.SelectedIndexChanged
    'DO OTHER STUFF HERE
    Dim alert = String.Format("alert('{0}');", "Hi")
    ScriptManager.RegisterStartupScript(Me, Me.GetType, "DropDownChange", alert, True)
End Sub

生成コード

ASP.NET がイベントが添付されたページをレンダリングすると、次のコードが生成されます。

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl00'];
if (!theForm) {
    theForm = document.ctl00;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
    theForm.submit();
    }
}
//]]>
</script>

<select id="cboLang" onchange="javascript:setTimeout('__doPostBack(\'cboLang\',\'\')', 0)"
    name="cboLang" style="display: none;">

質問

オートコンプリート入力を更新するたびにサーバー イベントをトリガーできるようにするには、どこで変更を加えることができますか?

4

2 に答える 2

1

この質問に答えるのに役立つことがいくつかあります。1 つは、この関数に関するJQuery-UI 独自のドキュメントを参照することです。

// Initialize the autocomplete with the select callback specified:
$( ".selector" ).autocomplete({  select: function( event, ui ) {}}); 
// Bind an event listener to the autocompleteselect event:
$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );

基本的に、アイテムが選択されたときに (メニューから、または入力して完全に一致するものを取得することによって) コールバックを通知する必要があることが発生する必要があります。

これは、オートコンプリートページに示されているデフォルトの機能を変更することで実行できます。

this._on( this.input, {
  autocompleteselect: function( event, ui ) {
    ui.item.option.selected = true;
    this._trigger( "select", event, {
      item: ui.item.option
    });
  },
  autocompletechange: "_removeIfInvalid"
});

このコードは、selectおよびchangeイベントにリスナーをアタッチし、これらのイベントが発生するたびに、インラインで定義された関数と _removeIfInvalid 関数を (それぞれ) 実行します。

次の変更を実装することで、有効な選択が行われたときにポストバックを実行できます。

//attach listeners
this._on(this.input, {
  autocompleteselect: "_selectFromMenu",
  autocompletechange: "_removeIfInvalid"
});

メニューから項目が選択されるたびに呼び出されます。

_selectFromMenu: function (event, ui) {
  ui.item.option.selected = true;
  this._trigger("select", event, {
      item: ui.item.option
    });
  __doPostBack('', '');
},

テキストが変更されるたびに呼び出されます:

_removeIfInvalid: function (event, ui) {

  // Selected an item, automatically valid, post back
  if (ui.item) {
    __doPostBack('', '');
    return;
  }

  // Search for a match (case-insensitive)
  var value = this.input.val(),
    valueLowerCase = value.toLowerCase(),
    valid = false;
  this.element.children("option").each(function () {
      if ($(this).text().toLowerCase() === valueLowerCase) {
        this.selected = valid = true;
        return false;
      }
    });

  // Found a match, post back
  if (valid) {
    __doPostBack('', '');
    return;
  }

  // Remove invalid value...

これは完全なコード変更を含むjsfiddle__doPostBackですが、何も処理されていないためコメントアウトされています

さらにいくつかの注意事項：

  • 私は __doPostBack を呼び出していますが、生成されたコードを処理する asp.net イベントのために、そのメソッドが利用可能であることに依存しています。
  • コンボ ボックスを初期化するには、 を呼び出す必要があります$("#combobox").combobox();。その操作を実行しているものは何でも、ポストバックから戻ったときにまだ呼び出されていることを確認してください。そうしないと、機能が戻ってきません。更新パネルでコードを非同期的に使用している場合、これは回避すべきことの 1 つです。
于 2013-05-29T18:17:35.363 に答える
0

__doPostBack(this.element.attr('name'), ''); の代わりに 書きます

  if (this.element.attr('onchange') != undefined &&        this.element.attr('onchange').indexOf("__doPostBack") >= 0)
                        __doPostBack(this.element.attr('name'), '');
于 2015-07-30T10:11:00.837 に答える