Один из способов сделать это - использовать плагин jQuery autocomplete . В вашей форме есть текстовое поле для поиска и скрытое поле для хранения идентификатора. Используйте автозаполнение через AJAX, чтобы получить список пар имя / идентификатор, возвращаемых как JSON, на основе критериев поиска. Настройте автозаполнение для принудительного выбора из списка, что запретит любой несоответствующий текст в поле. Когда пользователь выбирает элемент из списка, функция результата сохраняет связанный идентификатор в скрытом поле. Используйте скрытое поле в форме сообщения, чтобы получить идентификатор сотрудника.
Это может выглядеть примерно так:
View
$('#searchBox').autocomplete( '/Employees/Search', {
dataType: 'json',
max: 25,
minChars: 2,
cacheLength: 1,
mustMatch: true,
formatItem: function(data,i,max,value) {
return value;
},
parse: function(data) {
var array = new Array();
for (var i=0; i < data.length; i++) {
var datum = data[i];
var display = datum.FirstName + ' ' + datum.LastName;
array[array.length] = { data: datum, value: display, result: display };
}
}
});
$('#searchBox').result( function(event, data, formatted) {
if (data) {
$('#employeeID').val( data.EmployeeID );
}
});
$('form').submit( function() {
if (!$('#employeeID').val()) {
alert( 'You must select an employee before clicking submit!' );
return false;
}
});
<input type='text' id='searchBox' />
<input type='hidden' id='employeeID' name='employeeID' />
Контроллер:
public ActionResult Search( string q, int limit )
{
var query = db.Employees.Where( e => e.LastName.StartsWith( q ) )
.OrderBy( e => e.LastName )
.Select( e => new
{
FirstName = e.FirstName,
LastName = e.LastName,
EmployeeID = e.EmployeeID
});
if (limit > 0)
{
query = query.Take(limit);
}
return Json( query.ToList() );
}
public ActionResult SomeAction( int employeeID, ... )
{
...
}