我的jquery自动完成功能不工作

本文关键字:功能 工作 成功 jquery 我的 | 更新日期: 2023-09-27 18:14:10

假设我使用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>

我的jquery自动完成功能不工作

您的代码中有以下问题,

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

都完成了。现在你的代码应该可以工作了:)下面是工作示例

1 -我想你忘记将result变量解析为json了。

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

2 - resultarr变量没有jQuery自动完成数据源的结构:

[{"标签":"Choice1"、"价值":"value1"},…)