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

スクリプト

ここ

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

私はドロップダウンを持っています3つのカテゴリ1）従業員名2）従業員ID 3）メールId。 デフォルトでは、検索バーに何かを入力すると、従業員の名前が電子メールIDと共に表示されます。

と私は、カテゴリ内のID従業員を選択し、検索で何かを入力すると、それは、従業員IDを入力して関連する従業員の名前を検索し、提案に下記

を従業員の名前と電子メールIDを表示しなければならないと私はメールを選択した場合カテゴリのid、それはEMAILのIDを入力して関連する従業員の名前を見つけて、私はこのしてくださいSOMに新たなんだので、従業員の名前と提案

で以下の電子メールIDが表示される必要があり、検索で何かを入力私は明確に私を説明する。私はこれを使用する場合

iはrouteconfigで何かを追加する必要があります。

Answer 1

あなたは以下のようにサーバからJSONデータを取得し、オートコンプリートPARAMとしてそれを使用することができます。

<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 があり、彼らが使用するようですあなたはeasylyこのサンプルをcutomizeでき

 ej.DataManager 

そのデータマネージャー...

2 - 限り私は、ドキュメントから見ることができるように、私はこのように考えるだろうデータソース、

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

というパラメータがあります。

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

    }