jquery autoComplete 与 List<string> 作为源答案

【问题标题】：jquery autoComplete with List<string> as Sourcejquery autoComplete 与 List<string> 作为源
【发布时间】：2012-03-07 10:49:50
【问题描述】：

我有文本框名称 txtEmailList，我为其提供了自动完成列表，

 <asp:TextBox runat="server" ID="txtEmailList" CssClass="txtAutoComplete">

自动完成脚本

$('#txtEmailList').autocomplete({
                source: function(request, response) {
// this is the ajax call, which is running successfully
                    var msg = 
Assessments_JqueryAutoComplete.AutoComplete(request.term).value; //(ajaxpro functions)
                    response(msg.d); 
                }

            });

输出将像这样（在萤火虫中显示为纯文本），我如何将此数组附加到源属性。（我不能使用 $.ajax 方法，因为我需要使用 ajaxpro 作为办公规则），所以我从 ajax 调用中获取了数组列表，我如何绑定自动完成。

["List 1","List 2","List 3","List 4"];/* // 这是 jquery(from firebug) 的输出响应

[AjaxPro.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public List<string> AutoComplete(string query)
{
List<string> objLisItmes = new List<string>();
objLisItmes.Add("List 1");
objLisItmes.Add("List 2");
objLisItmes.Add("List 3");
objLisItmes.Add("List 4");
return  objLisItmes;
}

这是响应标头中的萤火虫输出

Cache-Controlno-cache Content-Length40 Content-Typetext/plain; charset=utf-8 DateWed，2012 年 3 月 7 日 10:45:37 GMT Expires-1Pragmano-cache

【问题讨论】：

我猜你需要返回你从服务器得到的东西......
怎么样？我已经尝试过响应（msg.d），但它没有显示在自动完成中
不...写这个：return msg;
我尝试返回味精，但没有成功；(
你也可以显示文本框的 html 吗？

标签： jquery asp.net jquery-ui ajaxpro

【解决方案1】：

而不是返回一个列表。我会返回一个字符串数组：

[AjaxPro.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public string[] AutoComplete(string query)
{
   List<string> objLisItmes = new List<string>();
   objLisItmes.Add("List 1");
   objLisItmes.Add("List 2");
   objLisItmes.Add("List 3");
   objLisItmes.Add("List 4");
   return  objLisItmes.ToArray();
}

【讨论】：

会发生什么变化？通过返回数组会有所帮助吗？会有什么帮助？
List 应该可以正常工作，并且似乎是因为您说要取回项目列表。你能显示文本框的 html 吗？
谢谢你 :) 它的任何工作方式。现在，但我不明白为什么这里需要 ToArray() ？

【解决方案2】：

而不是使用

$('#txtEmailList')

尝试使用

$('input[id$="txtEmailList"]')

由于您使用的是服务器控件 TextBox，因此您的 ID 很可能以“parentID1_parentID2_txtEmailList”之类的形式结束。上面的代码将抓取 ID 以“txtEmailList”结尾的输入。

这是我在我的测试项目中的做法，它正在工作。当然我没有使用 AjaxPro，所以我不确定你会如何使用它，但也许它会给你一些想法。

<script type="text/javascript">
        $(function () {
            var element = $('input[id$="TextBox1"]');

            element.autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "Default.aspx/GetList",
                        data: "{ 'term': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function(data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    value: item
                                }
                            }))
                        }
                    })
                }
            });
        });
    </script>

【讨论】：

什么是差异？因为我直接访问它。 ?我认为这不是答案。甚至它在 jquery 自动完成的开放功能中出现
它不在网格视图中。像这样渲染。它在 div 中的纯文本框中，即使我检查了渲染 ID，它也与我在 jquery 选择器中给出的相同。所以问题将与我猜的响应类型有关

【解决方案3】：

不应该是：

$('#txtEmailList').autocomplete({source: function(request, response) {
    // this is the ajax call, which is running successfully
    var msg = Assessments_JqueryAutoComplete.AutoComplete(request.term).value; //(ajaxpro functions)
    response(msg); 
    }

});

如果没有，我建议你尽可能使用 console.log(msg) 来分析响应对象。

【讨论】：

【解决方案4】：

只要确保您的 AJAX 调用返回 有效的字符串格式，就像 dummy example 一样。将其存储在变量中。然后使用它来定义source 属性，如下所示：

var availableValues = ["List 1","List 2","List 3","List 4"];
// var msg = Assessments_JqueryAutoComplete.AutoComplete(request.term).value;
$( "#txtEmailList" ).autocomplete({
    source: availableValues
});

【讨论】：