7

以下のスニペットでは、jquery オートコンプリート プラグインを次のように取得できます。

  1. 非表示フィールドを UserID で更新する
  2. 「#MessageTo」をフルネームで更新

.result を使用する必要があると思いますが、構文がわかりません。私は ASMX を使用しているため、投稿する必要があることに注意してください (セキュリティ リスクを有効にしたくない)

    $("#MessageTo").autocomplete({
        dataType: "json",
        autoFocus: true,
        minLength: 3,
        source: function (request, response) {
            var postParams = "{ pattern: '" + $("#MessageTo").val() + "' }";

            return jQuery_1_7_1.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '/Services/Users.asmx/GetNames',
                data: postParams,
                dataType: "json",
                success: function (data) {
                    response($.map(data.d.Users, function (c) {
                        return {
                            label: c.FullName,
                            value: c.UserID
                        };
                    }));
                }
            });
        }
    });

同様の投稿がいくつか見られますが、ASMX とは関連していません。

4

2 に答える 2

9

ユーザーがオートコンプリート対応のテキスト ボックスから何かを選択したときに、ページ上の他の HTML 要素を更新することに関心があると思いますが、そうですか?

上記のコードは、ユーザーが入力したときにオートコンプリートの「提案」を提供するために、おそらく既に機能しています。私が正しく理解している場合、ユーザーが提案の1つを受け入れた後、いくつかのフィールドを更新したいと考えています.s

これを行うにselectは、オートコンプリート オプションのメンバーを使用します。

 $("#MessageTo")
    .autocomplete({
        dataType: "json",
        autoFocus: true,
        minLength: 3,
        source: function (request, response) {
            var postParams = "{ pattern: '" + $("#MessageTo").val() + "' }";

            return jQuery_1_7_1.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '/Services/Users.asmx/GetNames',
                data: postParams,
                dataType: "json",
                success: function (data) {
                    response($.map(data.d.Users, function (c) {
                        return {
                            label: c.FullName,
                            value: c.UserID
                        };
                    }));
                }
            });
        }, 

        select: function (event, ui) {
            var v = ui.item.value;
            $('#MessageTo').html("Something here" + v);
            $('#Hidden1').html("Something else here" + v);
            // update what is displayed in the textbox
            this.value = v; 
            return false;
        }

    });

また、ASMX の使用は無関係です。オートコンプリートの観点からは、これは単なるデータのソースです。また、POST の使用は無関係です。HTTP GET を許可するようにサーバー側で ASMX を構成することができます。有効にすれば、セキュリティ ホールではありません。リクエストの受け取り方が違うだけです。

オートコンプリート ボックスでは、サーバー側が ASMX なのか Python なのか、ASP クラシックなのか、PHP なのか、その他のものなのかを判断できません。質問を正しく理解していれば、同様の投稿をいくつか見たが、ASMX とは関連していないというあなたのコメントは無関係です。

于 2012-04-05T21:21:19.613 に答える
7

ui.item.valueselect 構成オプションを使用することは正しいです。必要な値は、カスタム関数にandとして渡されますui.item.label。をreturn false使用して、デフォルトの動作を防止し、ターゲット要素にアクセスできますthis。すなわち

$("#MessageTo").autocomplete({
   /* Existing code is all OK */

   select: function (event, ui) {
      // Set autocomplete element to display the label
      this.value = ui.item.label;

      // Store value in hidden field
      $('#hidden_field').val(ui.item.value);

      // Prevent default behaviour
      return false;
   }
});
于 2013-09-03T16:49:16.247 に答える