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

Posted 2023-05-08

【中文标题】绑定数据库时，Devbridge 自动完成 ajax 不起作用

【英文标题】：Devbridge autocomplete ajax not working when bind database

【发布时间】：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" 
    ]

【参考方案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);
       ,
);