如何删除特定的字符和文本

Question

我已经完成了一个jQuery库的自动完成

使用jquery-ui-1.12.1.min.js

。 我已经对其进行了修改，以便使用用户名和全名进行搜索。 它会显示如下图

当我选择该值时，它将把整个文本粘贴到输入框中。

这是我的问题，它如何修改它以显示为图像，但是当我选择该值时，它只会将用户名粘贴到输入框中？

当我选择第一个值时，我如何只希望nonstop00000将其粘贴到输入框中

这是我的javascript

$(document).ready(function () {
    $("#id").autocomplete({
        source: function(request,response) {
            $.ajax({
                url: '@Url.Content("~/UserManagement/AutoCompleteUser")/',
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return [{ label: item.Username + " | " + item.FullName, value: item.id }];
                    }))
                }
            })
        },
        messages: {
            noResults: "", results: ""
        }
    });
})

这是我的搜索控制器

 if (!String.IsNullOrEmpty(searchString))
            {
                user = user.Where(s => s.Username.Trim().Contains(searchString.Trim())
                                       || s.FullName.Trim().Contains(searchString.Trim()));
            }

这是我的自动填充控制器

public JsonResult AutoCompleteUser(string term)
    {
        var result = (from r in db.UserTables
                      where ((r.Status == "Active") && (r.Username.ToLower().Contains(term.ToLower()) || (r.FullName.ToLower().Contains(term.ToLower()))))
                      select new { Username = r.Username, FullName = r.FullName }).Distinct();
        return Json(result);
    }

这是我的看法

 <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 search-panel">
            @using (Html.BeginForm("Index", "UserManagement", FormMethod.Get))
        {
                <div class="input-group form-group ui-widget">
                    @Html.TextBox("id", ViewBag.CurrentFilter as string, new { @class = "form-control autocomplete", @placeholder = "Search for..." })
                    <span class="input-group-btn">
                        <input type="submit" value="Search" class="form-control autocomplete " />
                    </span>
                </div>
            }
        </div>

Answer 1

为此，您可以使用select事件修改要放置到输入中的值。 尝试这个：

$("#id").autocomplete({
    // your settings...
    select: function(e, ui) {
        e.preventDefault();
        $('#id').val(ui.item.label.split('|')[0].trim());
    }
});