AngularJS Autocomplete未显示选项

AngularJS Autocomplete not showing options

本文关键字：选项显示 Autocomplete AngularJS 更新时间：2023-09-26

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

这是我刚开始使用的小提琴，它的工作原理正确：http://fiddle.jshell.net/59nq55rf/

这是使用数组的fiddle，无法在下拉列表中显示文本：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>

它肯定与jQuery UI库有关。它似乎期望属性名称恰好是"value"answers"id"，其他任何操作都不起作用。运行下面的代码片段，并使用字母"g"对其进行测试，以便自己查看。结果将正确显示3，但无法显示属性名称不正确的属性名称。

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

<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>

这是我对@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;
        }            
    }