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

Question

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

这是我需要帮助的棘手部分。 我希望下拉列表中的每个条目都有一个按钮，用于将该人名“添加”到表中。

例如，当我键入“ DEB”时，我正在寻找名称“ Debo”，我在下拉列表中看到了想要的名称。 我单击“添加”，它从下拉列表中删除名称“ 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。

查看我的回复屏幕截图：