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

网络服务代码：

[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 - 我认为您忘记将resultvar 解析为 json。

success: function (result) 
{
    var resultarr = jQuery.parseJSON(result);

2 - resultarr var 没有 jQuery 自动完成数据源所期望的结构：

[ {“标签”：“选择1”，“价值”：“价值1”}，...]

于 2013-05-17T14:01:25.203 回答
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 回答