绑定数据库时，Devbridge 自动完成 ajax 不起作用答案

【问题标题】：Devbridge autocomplete ajax not working when bind database绑定数据库时，Devbridge 自动完成 ajax 不起作用
【发布时间】：2020-05-10 03:56:43
【问题描述】：

我想在我的项目中使用 devbridge 自动完成 ajax。该插件必须绑定数据库中的数据。在下面你可以看到我的代码：

可见

<input type="text" id="searchinput" name="searchinput" />

jQuery

    <script>
    $('#searchinput').autocomplete({
        serviceUrl: '/Controller/fetchCondidate',
        onSelect: function (suggestion) {
            alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
        }
    });
</script>

在控制器中

    public IActionResult fetchCondidate()
    {
        var q = JsonConvert.SerializeObject
            (_context.Candidator.Select(ca => new { value = ca.Id, data = ca.Name }));

        return Json(new { suggestion = q });
    }

但我在控制台中收到此错误并且自动完成功能不起作用：

无法读取未定义的属性“长度”

在 serach 之后，我发现我发送了错误的 json 格式。现在我如何发送这种格式来查看

{
    suggestions: [
        { "value": "United Arab Emirates", "data": "AE" },
        { "value": "United Kingdom",       "data": "UK" },
        { "value": "United States",        "data": "US" }
    ]
}

【问题讨论】：

标签： jquery json asp.net-core autocomplete

【解决方案1】：

根据github中的参考，当你从控制器返回数据时，字段名是suggestions而不是suggestion。另外，如果您选择的字段（如Id和Name）包含int类型值，您可以将它们转换为string类型，否则会导致jquery.autocomplete.js文件出错：

public IActionResult fetchCondidate()
{
    var q = _context.Candidator.Select(ca => new { value = ca.Id.ToString(), data = ca.Name.ToString() }).ToList();

    return Json(new { suggestions = q });
}

查看：

$('#searchinput').autocomplete({
       serviceUrl: '/Controller/fetchCondidate',
       onSelect: function (suggestion) {
            alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
       },
});

【讨论】：