代码之家 › 专栏 › 技术社区 › ahmed abdelaziz

如何在分隔线上显示自动完成每个属性的结果,而不是使用斜线?

jquery-ui-autocomplete asp.net-web-api asp.net-mvc ajax jquery

0

ahmed abdelaziz · 技术社区 · 2 年前

我在一个ASP上工作。NET Web API。当我使用jQueryAjax请求调用Webneneneba API时,我会遇到问题。

我的问题是用斜线分隔的自动完成结果显示:

Id - Name - Designation

但我需要得到的预期结果是:

Id : 121
Name : michel nicol
Designation : It Manager

意味着我需要展示 Id 在第一行和第二行我都有 Name 第三行包含 Designation .

因此,每个属性都将在一行上,而不是使用分隔的斜杠。

完整代码详细信息:

$("#txtDirectManagerId").autocomplete({
        source: function (request, response) {
            var searchTextDirectManager = $("#txtDirectManagerId").val();
            console.log("search text" + searchTextDirectManager)
            $.ajax({
                url: '@Url.Action("GetAllEmployeeBasedSearchTextDirectManager", "Resignation")',
                data: { searchTextDirectManager: searchTextDirectManager },
                method: "GET",
                dataType: "json",
                success: function (data) {
                    response($.map(data, function (item) {
                        label: "File No : " + item.EmployeeID + " - " + "Name :" + item.EmployeeName + " - " +
                               "Designation : " + item.Designation, value: item.EmployeeID, employeeName: item.EmployeeName
                        };
                    }))
                }
            });
        },
        position: { my: "right top", at: "right bottom" },
        appendTo: '#searchContainerDirector',
        select: function (event, ui) {
            $("#DirectManagerName").val(ui.item.employeeName);
        },
        minLength: 4,
    });

用于自动完成的HTML控件:

<div class="col-md-7">
    @Html.EditorFor(model => model.LineManager, new { htmlAttributes = new { @class = "form-control", id = "txtLineManagerId" } })
    <div id="searchContainer">
    </div>
</div>
<div class="col-md-7">
</div>

用于生成自动完成的脚本版本

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"
        language="javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

更新的答案:

你能告诉我如何修改我的代码以在第二行、第二行和第三行显示id吗 任命 按代码选择

0 回复 | 直到 2 年前

1

0

ahmed abdelaziz 2 年前

我通过在每个功能结果中添加/n以自动完成来解决问题它取得了成功。

所以我在成功响应时将/n添加到name和Designation

response($.map(data, function (item) {
    return {
        label: "Id: " + item.EmployeeID + "\nName: " + item.EmployeeName + "\nDesignation: " + item.Designation,
        value: item.EmployeeID,
        employeeName: item.EmployeeName,
        Designation: item.Designation
    };
}))