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

I have finish autocomplete with a jquery library which is

我用jquery库完成了自动完成

using jquery-ui-1.12.1.min.js

. I have modified it to make to get the search with username and full name. it will show as below image

。我已将其修改为使用用户名和全名进行搜索。它将显示如下图像

when I select the value it will paste the whole text into an input box.

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

here is my question how do it modify it to show as the image but when I select the value it will only paste the username into input box?

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

how i only want nonstop00000 paste it into input box when i select the 1st value

当我选择第一个值时,我只想将nonstop00000粘贴到输入框中

here is my javascript

这是我的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: ""
        }
    });
})

here is my search controller

这是我的搜索控制器

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

here is my autocomplete controller

这是我的自动完成控制器

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);
    }

here is my view

这是我的看法

 <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>

1 个解决方案

#1

To achieve this you can use the select event to amend the value to be placed in to the input. Try this:

要实现此目的,您可以使用select事件来修改要放入输入的值。试试这个:

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