0

たとえば、ajaxを使用してasmxファイルからオブジェクトのリストを取得し、その後、オブジェクトのリストをjsonオブジェクトに解析すると、出力は次のようになります

[
    {
        "UserName": "hl",
        "FirstName": "hendra",
        "LastName": "lim"
    },
    {
        "UserName": "wd",
        "FirstName": "wildan",
        "LastName": "dan"
    },
    {
        "UserName": "gd",
        "FirstName": "genin",
        "LastName": "gn"
    },
    {
        "UserName": "tr",
        "FirstName": "tere",
        "LastName": "magda"
    }
]

しかし、どういうわけか私のオートコンプリート機能は機能しませんでした。

ここに私のコードがあります:

 var param;
       var resultarr;

       $(document).ready(function () 
       {
           param = document.getElementById('MainCT_dtvJobVac_PIC').value;
           $.ajax({
           type: 'POST',
           contentType: 'application/json;',
           data: '{keyword:' + JSON.stringify(param) + '}', // param in case utk lempar parameter.
           dataType: 'json',
           url: 'SvcUserList.asmx/GetUserList',
           success: function (result) 
           {
               resultarr = result.d;
               $('#<%#dtvJobVac.FindControl("PIC").ClientID%>').autocomplete
               ({
                   minLength: 0,
                   source: resultarr,
                   focus: function (event, ui) {
                       $("#MainCT_dtvJobVac_PIC").val(ui.item.FirstName);
                       return false;
                   },
                   select: function (event, ui) {
                       $("#MainCT_dtvJobVac_PIC").val(ui.item.FirstName);
                       //$("#<%#dtvJobVac.FindControl("PICKey").ClientID%>").val(ui.item.UserName);
                       //$("#results").text($("#<%#dtvJobVac.FindControl("PICKey").ClientID%>").val());
                       return false;
                   }
               });
           }
        })
      });

Web サービス コード :

[WebMethod]
        public string GetUserList(string keyword)
        {

            List<ADUserData> tes = new List<ADUserData>();

            ADUserData obj;



                obj = new ADUserData();
                obj.UserName = "hl";
                obj.FirstName = "hendra";
                obj.LastName = "lim";

                tes.Add(obj);

                obj = new ADUserData();
                obj.UserName = "wd";
                obj.FirstName = "wildan";
                obj.LastName = "dan";

                tes.Add(obj);

                obj = new ADUserData();
                obj.UserName = "gd";
                obj.FirstName = "genin";
                obj.LastName = "gn";

                tes.Add(obj);

                obj = new ADUserData();
                obj.UserName = "tr";
                obj.FirstName = "tere";
                obj.LastName = "magda";

                tes.Add(obj);

            JavaScriptSerializer jss = new JavaScriptSerializer();
            string output = jss.Serialize(tes);

            return output;
        }

修正はありますか？ここで何が間違っていますか？ありがとう。

ところで、これらの jquery リンク src をマスター サイトに配置しましたが、バージョンと関係がありますか? または、他の何か？事前に感謝します。

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
4

2 に答える 2

0

コードに次の問題があります。

  1. オートコンプリートのセレクターが正しくありません
  2. JSON 形式はオートコンプリートには無効です

これに対する解決策は次のとおりです。

$('#<%= dtvJobVac.FindControl("PIC").ClientID%>').autocomplete({
    source: availableTags,
    select: function (event, ui) {
        $(this).val(ui.item.UserName);
        return false;
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .append("<a>" + item.UserName + "</a>")
        .appendTo(ul);
};

上記のコードは、プロパティをサポートするようにオートコンプリートを更新しUserNameます。コードでプロパティ名を変更できます。

今、あなたがすべきことはただ一つです。jQuery が JSON 形式をサポートするように強制する必要があります。

$.extend($.ui.autocomplete, {
    filter: function (array, term) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
            return matcher.test(value.UserName || value.FirstName || value.LastName || value.label || value.value || value);
        });
    }
});

すべてが完了しました。これで、コードが機能するはずです:)これが実際のサンプルです

于 2013-05-17T18:21:56.817 に答える