Question

我正在尝试让jQuery UI AutoComplete小部件在WebForms应用程序中使用远程数据源。我已成功调用我的Web服务，但控件不会弹出带有返回项的列表。

这是我的标记：

<p>
    <label for="birds" class="fieldLabel">Company:</label>
    <input id="existingProgramCompanyName" type="text" style="width: 350px" />
</p>

这是我的剧本：

$("#existingProgramCompanyName").autocomplete({
    source: "/Services/ProgramListServices.asmx/FilteredProgramList",
    minLength: 3,
    select: function (event, ui) {
        alert('Got it!');
    }
});

每当我在过去做过这件事时，我最大的问题就是以正确的格式返回数据。 AutoComplete小部件需要JSON，所以我花了很多时间让我的代码返回有效的JSON。这是从我的Web服务返回的实际字符串：

{
  "Companies":[{"Id":"1","Value":"First","Label":"First"},
               {"Id":"2","Value":"Second","Label":"Second"},
               {"Id":"3","Value":"Third","Label":"Third"}],
  "HasData":true,"Message":"","Success":true
}

这是有效的JSON吗？

控件正确显示了小动画加载图像。我的Web服务正在被调用并且正在返回而没有错误。但是AutoComplete控件永远不会弹出列表。

到目前为止，有没有人看到我的问题？尝试对此进行故障排除的下一步是什么？

Answer 1

是的，您的字符串是有效的JSON，但这并不意味着AutoComplete可以使用它。格式可以在Autocomplete Widget Source看到。我认为具体这适用于你的情况：

* An array of strings: [ "Choice1", "Choice2" ]
* An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

您的Feed生成的内容无法按预期工作，无论您是否将其括在括号中（您需要括号）：

$("#existingProgramCompanyName").autocomplete({
    source: {"Companies": [{ "Id": "1", "Value": "First", "Label": "First" },
        { "Id": "2", "Value": "Second", "Label": "Second" },
        { "Id": "3", "Value": "Third", "Label": "Third"}],
        "HasData": true, "Message": "", "Success": true
        }
    });

然而，这个稍微修改过的版本会（注意案例是小写的）：

 $("#existingProgramCompanyName").autocomplete({
     source: [{ "value": "First", "label": "First" },
              { "value": "Second", "label": "Second" },
              { "value": "Third", "label": "Third"}]
     });

所以，要修复，我会调整你的JSON提要输出不同的格式！

更新：或许只需尝试使用字符串数组选项进行测试：

List<string> s = new List<string>();
//populate the list
return new JavaScriptSerializer().Serialize(s);

使用远程数据源对jQuery-UI自动完成进行故障诊断

1 个答案: