Автозаполнение Devbridge ajax не работает при привязке базы данных

Question

Я хочу использовать 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 });
    }

Но я получаю эту ошибку в консоли, и автозаполнение не работает:

Невозможно прочитать свойство 'length' undefined

После поиска я обнаружил, что отправляю неверный формат json. Теперь, как я могу отправить этот формат для просмотра

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

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