jQuery UI 自动完成自定义对象作为源而不是字符串数组

Question

我正在使用 JQueryUI 自动完成，想知道如何使用自定义对象作为我的数据源（即我想传回以下类型的列表）：

public class Tag
{
    public string Name { get; set; }
    public int Count { get; set; }
}

我当前正在使用的自动完成代码（当我传回时效果很好）名称的直接字符串数组）几乎是 jQuery UI 站点的副本：

$(function () {
        function split(val) {
            return val.split(/ \s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }

        $("#tags")
        // don't navigate away from the field on tab when selecting an item
        .bind("keydown", function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
                    $(this).data("autocomplete").menu.active) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: function (request, response) {
                $.getJSON("Home/GetTag", {
                    term: extractLast(request.term)
                }, response);
            },
            search: function () {
                // custom minLength
                var term = extractLast(this.value);
                if (term.length < 1) {
                    return false;
                }
            },
            focus: function () {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui) {
                var terms = split(this.value);
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push(ui.item.value);
                // add placeholder to get the comma-and-space at the end
                terms.push("");
                this.value = terms.join(" ");
                return false;
            }
        });
    });

我对原始演示源的唯一更改是 Url，并且我在空格而不是逗号上进行分割（用于多个自动完成） 。

HTML 如下：

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags"/>
</div>

理想情况下，我想向用户呈现一个名称列表，并附有相应的计数。

Answer 1

如何使用自定义对象作为我的数据源

您需要以小部件期望的方式格式化数据。结果数组中的每个对象中必须具有 label 属性或 value 属性（或两者），以便小部件显示结果。您可以在对象中包含其他数据，只要它满足这些要求即可。

要格式化从服务器返回的数据，约定是使用 $.map：

source: function (request, response) {
    $.getJSON("Home/GetTag", {
        term: extractLast(request.term)
    }, function (data) {
        response($.map(data, function (item) {
            return {
                value: item.Name,
                count : item.Count
            };
        });
    });
},

（未经测试）

这应该会为您填充结果。这与您问题的第二部分密切相关：

理想情况下，我想向用户呈现一个名称列表，并附有相应的计数。

按照此演示作为指导，这很容易完成：

$("#auto").autocomplete({ ... })
    .data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "<br />" + item.count + "</a>")
            .appendTo(ul);
    };

您可以覆盖_renderItem 函数来显示您想要的任何内容，只要它是包含 a 标记并具有数据 item.autocomplete 的 li 即可。

将这两种策略结合起来，您就可以开展业务了。有关此操作的示例，请查看此处的示例：http://jsfiddle.net/andrewwhitaker/UvegL /

此示例结合了远程数据源和自定义数据&展示。尽管 AJAX 调用有点不同，但希望它能有所帮助。