Question

我在ASP.NET MVC5中编程。在我的一个观点中，我需要能够创建一个搜索栏。对于此示例，假设您正在搜索名称。当您开始输入某个人的姓名时，所有结果都会在您输入时显示在下拉列表中。

这是我需要帮助的棘手部分。我希望在下拉列表中为每个条目设置一个按钮，将该人名添加到表中。

例如，我正在寻找名称“Debo”当我输入“D-E-B”时，我在下拉列表中看到了我想要的名字。我点击“添加”，它从下拉列表中删除名称“Debo”并将其添加到我的表中。一旦“Debo”被添加到表格中，我需要能够看到Debo的年龄和性别，我不会在下拉列表中看到。

我没有任何代码示例，因为我甚至不知道从哪里开始。我研究过这个疯狂，但我找不到任何东西。任何帮助或指出我正确的方向，将不胜感激，

Answer 1

我正在JQueryUI使用自动填充功能。请参考下面的代码，希望它能帮到你。

JavaScript代码：

$("#member_CompanyName").autocomplete({
    highlightClass: "bold-text",
    search: function () {
        $(this).addClass('working');
    },
    source: function (request, response) {
        var companyDetails = new Array();
        $.ajax({
            url: "/ControllerName/JsonActionResult",
            async: false,
            data: {
                "parm": request.term
            },
            success: function (data) {
                if (data.length === 0) {
                    companyDetails[0] = {
                        label: "No Result Found",
                        Id: ""
                    };
                } else {
                    for (var i = 0; i < data.length; i++) {
                        companyDetails[i] = {
                            label: data[i].Value,
                            Id: data[i].Key
                        };
                        $("#no-companyfound").css("display", "none");
                    }
                }
            }
        });
        response(companyDetails);
    },
    minLength: 2,
    select: function (event, ui) {
        /*Select Function works on when you selects element from Response List*/
        $.ajax({
            async: false,
            url: "/ControllerName/JsonActionResultonClick",
            data: {
                "id": ui.item.Id
            },
            success: function (data) {
                // Do your success logic here
            },
            error: function (xhr, ajaxOptions, thrownError) {
                // Error Logic here
            }
        });
    },
    open: function () {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function () {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});

控制器代码：

[HttpGet]
    public JsonResult JsonActionResult(string parm) {
        // Replace your special Character like "-,~" etc from your search string
        var result = new List < KeyValuePair < string,
            string >> ();
        foreach(var item in _obj_fulldetails.GetCompanylistSearch(parm)) {
            result.Add(new KeyValuePair < string, string > (item.Value.ToString(), item.Text));
        }
        return Json(result, JsonRequestBehavior.AllowGet);
    }

您可以实施“添加” 按项目选择按钮。如果您仍想要添加按钮，则可以将响应字符串编辑为JS。

请参阅我的回复截图：

动态搜索栏 - 在ASP.NET MVC5中从下拉列表中添加元素

1 个答案: