2016-11-16 3 views
1

меня закончить автозаполнения с библиотекой JQuery, котораякак удалить специфический характер и текст

с помощью JQuery-UI-1.12.1.min.js

. Я изменил его, чтобы сделать поиск с именем пользователя и полным именем. он будет показывать, как показано ниже изображения

enter image description here

когда я выбираю значение будет вставить весь текст в поле ввода.

enter image description here

вот мой вопрос, как сделать это изменить его, чтобы показать, как изображение, но когда я выбираю значение будет только вставить имя пользователя в поле ввода?

как я только хочу nonstop00000 вставить его в поле ввода, когда я выберите 1-значение

вот мой 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> 
+0

Эта библиотека автозаполнения вы используете? –

+0

показать html ввода – Sojtin

+0

@RoryMcCrossan Я использовал jquery-ui-1.12.1.min.js – nonstop328

ответ

2

Для достижения этой цели вы можете использовать select событие изменить значение, которое следует поместить в ко входу. Попробуйте следующее:

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

Я попробовал, но я получаю сообщение об ошибке из java-скрипта, который // ui.item.split не является функцией // – nonstop328

+0

Извините, я забыл '.label'! –

+0

Thx для вашего решения !! он отлично работает – nonstop328

Смежные вопросы