jquery автозаполнение сложный html Результат

Question

Мне нужно текстовое поле автозаполнения для поиска, и я буду использовать для этого пользовательский интерфейс jQuery. Я использую ASP.NET Core API для получения результатов поиска в формате JSON. Мой результат поиска должен быть сгруппирован с панелью сворачивания начальной загрузки и членами группы, показанными в таблице. Каждая группа имеет разные поля, а затем имеет разные таблицы. Каково лучшее решение для этого случая? Благодарю.

 $('#SearchTextBox').autocomplete({
                        source: 'api/user/search/'
                    });

Answer 1

Мой ответ может быть супер поздно. Но я надеюсь, что это поможет кому-то еще. В основном я создал это в MVC-5. Вы должны изменить его в соответствии с вашими потребностями.

$("#txtsearchpatient").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("SearchPatient")',
                dataType: "json",
                data: { search: $("#txtsearchpatient").val() },
                success: function (data) {
                    if (data.length > 0) {
                        response($.map(data, function (item) {
                            return {
                                id: item.Id,
                                value: item.Name
                            };
                        }));
                    }
                    else {
                        $("#emptysearchdiv").hide();
                        var result = [
                            {
                                id:0,
                                label: 'No matches found',
                                value: ""
                            }
                        ];
                        response(result);
                    }
                },
                error: function (xhr, status, error) {
                }
            });
        },
        autoFocus: true,
        select: function (event, ui) {
    $(this).val(ui.item.value);

    var value = ui.item.value;
    var id = ui.item.id;
        },
        search: function (e, u) {
            $(this).addClass('loader');
        },
        response: function (e, u) {
            $(this).removeClass('loader');
        }
    });




public JsonResult SearchPatient(string search)
    {
        Regex RE_Numbers = new Regex(@"^\d+$");
        if(RE_Numbers.IsMatch(search) == true)
        {
            var sdsds = db.Patient.Where(x => 
 x.PhoneNumber.Contains(search)).Select(x => new {
                Id = x.Id,
                Name = "Name: " + x.Name + " | " + "EmailId: " + x.EmailId + " | " + 
 "Phone: " + x.PhoneNumber + " | " + "Age: " + x.Age
            }).ToList();
            return Json(sdsds, JsonRequestBehavior.AllowGet);
        }
        else if(search.Contains("@") == true || search.Contains(".com") == true)
        {
            var sdsds = db.Patient.Where(x => x.EmailId.Contains(search)).Select(x => 
new {
                Id = x.Id,
                Name = "Name: " + x.Name + " | " + "EmailId: " + x.EmailId + " | " + 
"Phone: " + x.PhoneNumber + " | " + "Age: " + x.Age
            }).ToList();
            return Json(sdsds, JsonRequestBehavior.AllowGet);
        }
        else
        {
            var sdsds = db.Patient.Where(x => x.Name.Contains(search)).Select(x => 
new {
                Id = x.Id,
                Name = "Name: " + x.Name + " | " + "EmailId: " + x.EmailId + " | " + 
"Phone: " + x.PhoneNumber + " | " + "Age: " + x.Age
            }).ToList();
            return Json(sdsds, JsonRequestBehavior.AllowGet);
        }
    }