时间戳

首页 > 解决方案 > 绑定数据库时，Devbridge 自动完成 ajax 不起作用

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

问题描述

我想在我的项目中使用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" }
    ]
}

标签： jqueryjsonasp.net-coreautocomplete

解决方案

根据 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);
       },
});

推荐阅读