Question

我不知道这段代码有什么问题。警报显示数据已从Web服务返回，但自动完成仍未显示数据。我正在使用ASP.net 2.0和谷歌jquery链接

  $(document).ready(function() {
         $.ajax({
            type: "POST",
            url: "http://localhost/WebService/Service.asmx/getlist2",
            dataType: "json",
            data: "{}",


            contentType: "application/json; charset=utf-8",
            success: function(data) {
         alert("getlist 2");
             alert(data);

                $('#project1').autocomplete({
                    minLength: 2,
                    source: data,

                    focus: function(event, ui) {
                        $('#project1').val(ui.item.TagName);
                        alert(ui.item.TagName);//no alert is fired here
                        return false;
                    },
                    select: function(event, ui) {
                        $('#project1').val(ui.item.TagName);
                        //$('#selectedValue').text("Selected value:" + ui.item.TagID);
                        return false;
                    }
                });
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
     });

和网络服务方法

[WebMethod]
[System.Web.Script.Services.ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<Tag> getlist2()
{
    <Tag> tagscollection = new  EntitiesCollection<Tag>();
    ProcessTagList getlisttags = new ProcessTagList();

    string strtag = "";

    Tag tag = new Tag();
    tag.TagName =   strtag;
    tag.UniqueName =   strtag;
    getlisttags.OTag = tag;
    getlisttags.Invoke();
    tagscollection = getlisttags.OTagsCollection;


    ;
      List<Tag> a = new List<Tag>();
    foreach(Tag tagc in tagscollection)
    {
        a.Add(tagc);
    }


    return a;


}

firebug中显示的数据是：

[{ “__类型”： “myproject.Common.Tag”， “标签识别”： “21abf6b1-6d45-41e5-a39b-006e621eeb22”， “UniqueName”： “的dotnet”， “变量名”： “DOTNET”，” CreatedAt “：”/日期（1255108286850）/“}]

此jquery代码显示了与第一个jquery示例一起使用的webservice的下拉列表。

$("#tbAuto").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "http://localhost/myproject/Service.asmx/getlist2",
            data: "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
          //  dataFilter: function(data) { return data; },

            success: function(data) {
                response($.map(data, function(item) {
                    return {
                        value: item.TagName
                    }
                }))
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(errorTrown);
            }
        });
    },
    minLength: 0
});

Answer 1

您需要将autocomplete source属性设置为collection \ array。我不认为您返回的数据是一个，尽管它可能包含一个。您还需要重命名服务器端对象以提供标签值对。 e.g

{“id”：“1”，“label”：“StackOverflow”，“value”：“SO”}

检查示例here并使用firebug查看它们如何返回json数据。

来自文档

本地数据可以是一个简单的数组字符串，或包含对象数组中的每个项目，带有a 标签或价值属性或两者。该 label属性显示在建议菜单。价值将是之后插入到input元素中用户从中选择了一些东西菜单。如果只有一个属性指定，它将用于两者，例如。如果你只提供 value-properties，值也会用作标签。

可以粘贴json响应。

Answer 2

好的，我知道你使用的是asp.net，我的例子基于PHP和MySQL，但由于你的问题似乎是关于JSON格式的自动完成是期待的，所以无论如何我都在发帖。

从jQuery UI page获取最新文件。自动完成需要来自基础包的UI Core，UI Widget和UI Position。您还需要自动完成小部件本身。

这个例子适合我：

HTML：

<div>
    <input id="cities" />
</div>

脚本部分：

（它将cities.php的搜索变量发送到cities.php？term =）

$(function() {
  $("#cities").autocomplete({
    source: "backend/cities.php",
    minLength: 2,
    select: function(event, ui) {
      // perhaps do something with these?
      region = ui.item.id;
      country = ui.item.label;
      city = ui.item.value;
      secret = ui.item.secret;
   }
});
});

cities.php中的PHP：

（需要使用变量 id ，标签和值。标签用于填充下拉列表。输入值在列表中单击标签值时进入输入框。）

// important to set header with charset
header('Content-Type: text/html; charset=utf-8');
$term = $_POST["term"];
// some database stuff removed
// loop it through and build array
$n = 0;
    while ($row = $q->fetch()) {
        $row_array[$n]['id'] = $row['City'];
        $row_array[$n]['label'] = $row['Country'];
        $row_array[$n]['value'] = $row['Region'];
        $row_array[$n]['secret'] = 'blabla';
        $n++;
    }
    // encode it to json format
    echo json_encode($row_array);

发回的JSON：

（当？term = new york）

[{"id":"New York","label":"United States","value":"New York","secret":"blabla"},{"id":"Minnesota","label":"United States","value":"New York Mills","secret":"blabla"},{"id":"New York","label":"United States","value":"New York Mills","secret":"blabla"}]

所以，回顾一下：

默认情况下，它会将带有搜索词的变量“term”发送到后端页面。
需要发送“id”，“value”和“label”变量。
默认情况下，下拉列表中填充了“label”-values。
默认情况下，单击列表会在输入框中填入“value”。
您可以添加其他变量名称并使用它们制作内容，但需要上述三个。
JSON语法需要如上所示。

我希望它有所帮助。

Answer 3

您的数据未显示，因为自动填充以某种方式（ID，标签和值）需要数据。另见其他答案。

您的getlist2函数提供了另一种数据结构（__ type，TagID，UniqueName，TagName和CreatedAt）。

尝试修改getlist2以返回正确的语法。

你对主题开始的最后一次更改（jquery autocomplete + .ajax）看起来没问题，那段代码没有用？

Jquery自动完成JSON从webservice返回结果，但它没有显示在下拉列表中

3 个答案: