Question

My Angular autocomplete正在使用对象数组并返回正确的结果列表。我可以访问变量并将它们映射到name和id字段，但是一旦我这样做，我的下拉选择器就不会显示文本。

这是我开始使用并且工作正常的小提琴：http://fiddle.jshell.net/59nq55rf/

以下是使用数组的小提琴，无法在下拉列表中显示文字： http://fiddle.jshell.net/ua1r8kjv/

    $(function () {
        var categoryList = [
           { "CategoryName": "Groceries", "CategoryID": "1" },
           { "CategoryName": "Games", "CategoryID": "2" },
           { "CategoryName": "Gadgets", "CategoryID": "3" },
        ]



        $("#Category").autocomplete({
            source: function (request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

                var matching = $.grep(categoryList, function (value) {

                    var name = value.CategoryName;
                    var id = value.CategoryID;

                    return matcher.test(name) || matcher.test(id);
                });

                response(matching);
            }
        });
    });

HTML

  <div class="ui-widget">
        <form>
            <label for="txtEmployeeName">Developer:</label>
            <input id="Category" />
        </form>
    </div>

Answer 1

它最终与jQuery UI库有关。似乎期待财产名称正好是＆＃34;价值＆＃34;和＆＃34; id＆＃34;，其他任何东西都行不通。运行下面的代码段并使用字母＆＃39; g＆＃39;进行测试。亲眼看看。结果将正确显示3但无法显示具有不正确属性名称的那些。

＆＃13;

        $(function () {
            var categoryList = [
           { "value": "Groceries", "id": "1" },
           { "categoryname": "Games", "categoryid": "2" },
           { "doIwork": "Gadgets", "doIworkId": "3" },
        ]
            
       

            $("#Category").autocomplete({
                source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

                    var matching = $.grep(categoryList, function (value) {
    
                        var name = value.categoryname || value.doIwork || value.value;
                        var id = value.categoryid || value.doIworkId || value.id;

                        return matcher.test(name) || matcher.test(id);
                    });
                    response(matching);
                }
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <div class="ui-widget">
        <form>
            <label for="txtEmployeeName">Developer:</label>
            <input id="Category" />
        </form>
    </div>

＆＃13;

Answer 2

这是我对@Urielzen提出的答案的自定义解决方案

 _CustomPair[] pairList = new _CustomPair[length];

 private class _CustomPair
    {
        public string value;
        public string id;

        public _CustomPair(string curval, string curid)
        {
            value = curval;
            id = curid;
        }            
    }

AngularJS自动填充不显示选项

2 个答案: