Question

我需要一个自动完成文本框进行搜索，为此我将使用jQuery UI。我正在使用ASP.NET Core API以json格式获取搜索结果。我的搜索结果应该与Bootstrap折叠面板分组在一起，并在表中显示分组成员。每个组都有不同的字段，然后有不同的表。这种情况下最好的解决方案是什么？谢谢。

 $('#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);
        }
    }

jQuery自动完成复杂html结果

1 个答案: