Question

我有一个函数返回一个字符串列表，我需要将其设置为我的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>

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

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

Answer 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>");

尽管如此，谢谢你的帮助！

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

2 个答案: