Question

所以说，我使用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>

Answer 1

1 - 我认为您忘记将result var解析为json。

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

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

[{“label”：“Choice1”，“value”：“value1”}，...]

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

一切都完成了。现在你的代码应该有效:) Here is the working sample

我的jquery自动完成功能不起作用

2 个答案: