автозаполнения с помощью JSON AJAX JQuery в C# MVC

Question

контроллер

public class HomeController : Controller 
    { 
     public JsonResult UniversalSearch() 
     { 
      List<UniversalSearchBar> EmployeeDetails = new List<UniversalSearchBar>(); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Abishek", EmployeeID = "SF2532", EmailID = "abishek@syncfusion.com" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Bharath", EmployeeID = "SF2010", EmailID = "bharath@syncfusion.com" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Roshini", EmployeeID = "SF3052", EmailID = "roshini@syncfusion.com" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Kathir", EmployeeID = "SF5572", EmailID = "kathir@syncfusion.com" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Ragu", EmployeeID = "SF7582", EmailID = "ragu@syncfusion.com" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Sri", EmployeeID = "SF3456", EmailID = "sri@syncfusion.com" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Guru", EmployeeID = "SF2890", EmailID = "guru@syncfusion.com" }); 

      var Employees = EmployeeDetails; 
      return Json(Employees, JsonRequestBehavior.AllowGet); 
     } 
    } 

Посмотреть

<select class="form-control" id="searchFilterList" style="width:200px!important" onchange="changeSearchBarID()"> 
    <option value="employeeName">Employee Name</option> 
    <option value="employeeID">Employee ID</option> 
    <option value="emailID">Email ID</option> 
</select> 

<input class="form-control" type="text" placeholder="Search..." id="EmployeeNameSearch"; style="max-width:800px!important"> 

Script

var autocomplete; 
$(function() { 
    // declaration 
    var options = { 
     //how to render json data from controller here?// 
    }; 
    $('#EmployeeNameSearch').ejAutocomplete({ 
     dataSource: options, 
     width: "800", 
     template: '<div class="txt"> ${EmployeeName} </div>' + 
        '<div class="txt"> ${EmailID} </div>' 
    }); 
}); 

Здесь у меня есть выпадающий три категории 1) Имя сотрудника 2) Идентификатор сотрудника 3) Идентификатор электронной почты. По умолчанию, когда я набираю текст в строке поиска, он должен отображать имя сотрудника в предложении вместе с идентификатором электронной почты.

И если я выбираю сотрудника Id в категории и типа что-то в поиске он должен найти имя сотрудника, связанный с печатая РАБОТНИКОВ ID и отображать имя сотрудника и электронный идентификатор ниже в предложении

И если я выбираю электронной почты Id в категории и типа что-то в поиске он должен найти имя сотрудника, связанные с печатая EMAIL ID и отображать имя сотрудника и электронный идентификатор ниже в предложении

Так как я новичок в этом, пожалуйста, сома и я объясняю это ясно.

Должен ли я добавить что-то в routeeconfig, когда я использую это.

Answer 1

Вы можете получить данные в формате JSON с сервера, как показано ниже, и использовать его в качестве автозаполнения пар:

<script type="text/javascript"> 
    $(function() { 
     $.get("URL_TO_CONTROLLER_ACTION", function (jsonOptions) { 
      $('#EmployeeNameSearch').ejAutocomplete({ 
       dataSource: jsonOptions, 
       width: "800", 
       template: '<div class="txt"> ${EmployeeName} </div>' + 
          '<div class="txt"> ${EmailID} </div>' 
      }); 
     }); 
    }); 
</script> 

Answer 2

Кажется, с помощью этого ->https://help.syncfusion.com/api/js/ejautocomplete

1- Там находится http://help.syncfusion.com/js/autocomplete/data-binding#odata , кажется, они используют их DataManager

 ej.DataManager 

вы могли easyly cutomize этот образец ...

2- Насколько я могу видеть из документа, существует параметр с именем источника данных,

dataSource: window.carList,value:"Austin-Healey" 

Я думаю, как это;

dataSource : function(){ 
     // someAjaxStuff here 
     // by your search parameters 
     // ps. 
     // also dont forget it is working async... 

    }