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

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

和web服务方法的萤火所示

[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; 


} 

数据是：

[{ “__type” ： “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

您需要将自动完成源属性设置为集合\数组。我不认为你的返回数据是一个，尽管它可能包含一个。您还需要重命名您的服务器端对象以提供标签值对。例如

{ “ID”： “1”， “标签”： “StackOverflow上”， “值”： “SO”}

检查例子出来here和使用萤火虫，看看他们如何返回JSON数据。

从文档

本地数据可以是字符串的一个简单的阵列 ，或者它包含对象为 每个项目阵列中的，与任一一个 标签或属性值或两者。 标签属性显示在 建议菜单中。在 用户从 菜单中选择了某些内容后，该值将被插入到输入元素中的 。如果仅指定一个属性 ，则它将用于两个，例如 。如果您只提供 值属性，则该值也将被用作标签的 。

您可以粘贴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的城市。 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; 
    } 
}); 
}); 

使用

（变量ID，标签和值需要：

在cities.php的PHP。标签用于填充下拉列表。当列表中的标签值被点击时，值被输入到输入框中）。

// 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送回：

（当长期=纽约？）

[{"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”变量发送回去。
• 默认情况下，下拉列表中填充了“标签”值。
• 默认情况下，单击列表将填充“值”的输入框。
• 您可以添加额外的变量名称并对它们进行设置，但需要上述三个名称。
• JSON语法需要像上面提供的那样。

我希望它有帮助。

Answer 3

您的数据未显示，因为自动完成功能需要以某种方式（id，标签和值）的数据。另请参阅其他答案。

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

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

你对主题start（jquery autocomplete + .ajax）的最后一个改变看起来没问题，那段代码不工作？