获取函数的结果作为 jQuery 自动完成选项答案

【问题标题】：Getting a function's result as jQuery autocomplete options获取函数的结果作为 jQuery 自动完成选项
【发布时间】：2026-01-05 22:05:01
【问题描述】：

我有一个函数，它返回一个字符串列表，我需要将其设置为我的 jQuery 自动完成组件中显示的选项。代码看起来或多或少是这样的：

private static List<string> AutoCompleteOptions(string input)
    {
        var query = (from items in availableItems where items.Contains(input)
                     select items);
        return items;
    }

但是，我想要的代码结果不在服务内；它在客户端。有没有办法将此结果用作我的自动完成组件的选项（在 url 字段而不是 asmx 中设置 aspx.cs 文件）？

目前的自动完成代码如下所示：

    <script type="text/javascript">
    $(function () {
        $('#<%=TextBox1.ClientID%>').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "Default.aspx.cs/AutoCompleteOptions",
                    data: "{ 'input':'" + request.term + "' }",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                    }
                });
            }
        });
    });
    </script>

但我得到的只是“未找到”消息...

【问题讨论】：

标签： jquery asp.net autocomplete

【解决方案1】：

使用JavaScriptSerializer class将数据编码为json

private static List<string> AutoCompleteOptions(string input)
{
    var query = (from items in availableItems where items.Contains(input)
                 select items);
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    return serializer.Serialize(items);
}

或者你也可以试试这个

$.ajax({
    url: "Default.aspx.cs/AutoCompleteOptions",
    data: "{ 'input':'" + request.term + "' }",
    type: "POST",
    contentType: "application/json;charset=utf-8",
    success: function(data) {

        data = $.parseJSON(data);

        response(data.d);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    }
});

【讨论】：

【解决方案2】：

一位朋友给我发了一个不同的方法来解决我的问题。这是一个足够简单的解决方案，它不需要直接访问代码隐藏。尽管如此，它还需要对我的 jQuery 组件进行一些更改。组件的代码最终看起来像这样：

    $(function () {
        $("#tags").autocomplete({
            source: SourceFromControl,
            select: function (e, ui) {
                e.preventDefault();
                $('#tags').val(ui.item.label);
                $('#tagId').val(ui.item.value);
                console.log(ui.item.value);
            },
            focus: function (e, ui) {
                e.preventDefault();
                $('#tags').val(ui.item.label);
            },
        });
    });

还需要添加一个额外的 asp 组件，该组件将包含一个包含我想在自动完成组件中显示的字符串数组的列表：

    <asp:Literal ID="lstSourceFromControl" runat="server"></asp:Literal>

之后，我需要做的就是用我需要的数据填充 lstSourceFromControl 组件，然后使用 StringBuilder 对其进行序列化。不像使用序列化程序那样优雅，但它的工作方式正是我需要的工作方式！

    StringBuilder sb = new StringBuilder();
    sb.Append("<script>");
    sb.Append("var SourceFromControl = [");
    string item = string.Empty;
    for (int i = 0; i < controle.Length; i++)
    {
            if (!string.IsNullOrEmpty(item))
                    item = ",";
            sb.Append(item + "{label:\"" + control[i] + "\"}");
            item = ",";
    }
    sb.Append("];");
    sb.Append("</script>");

不过，感谢您的帮助！

【讨论】：