自動完成

-3

public class HomeController : Controller 
    { 
     public JsonResult UniversalSearch() 
     { 
      List<UniversalSearchBar> EmployeeDetails = new List<UniversalSearchBar>(); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Abishek", EmployeeID = "SF2532", EmailID = "[email protected]" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Bharath", EmployeeID = "SF2010", EmailID = "[email protected]" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Roshini", EmployeeID = "SF3052", EmailID = "[email protected]" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Kathir", EmployeeID = "SF5572", EmailID = "[email protected]" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Ragu", EmployeeID = "SF7582", EmailID = "[email protected]" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Sri", EmployeeID = "SF3456", EmailID = "[email protected]" }); 
      EmployeeDetails.Add(new UniversalSearchBar() { EmployeeName = "Guru", EmployeeID = "SF2890", EmailID = "[email protected]" }); 

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

在這裏，我有下拉與三類1）員工姓名2）員工ID 3）電子郵件ID。默認情況下，當我在搜索欄中輸入內容時，它應該在建議中顯示員工姓名以及電子郵件ID。

如果我在類別中選擇員工ID和搜索應該找到員工的姓名與輸入員工ID和顯示員工姓名和建議以下電子郵件ID類型的東西

如果我選擇電子郵件ID類別和搜索應該找到員工姓名輸入相關EMAIL ID和顯示員工姓名和建議

以下電子郵件ID因爲我是新來這個，請鍵入索姆東西我清楚地解釋了我。

我應該在routeconfig中添加一些東西，當我使用它。

來源

2016-10-21 Abishek Chandrasekar

請爲此類需求添加WebApi。 –

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

來源

2016-10-21 12:25:26

看來，問題即將動態jsonOptions 所以這對靜態搜索/自動完成但罰款當改變參數時，你必須重新綁定自動完成。 ej.DataManager似乎更適合於提供spurpose。 –

它似乎用這個 - >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... 

    }

來源

2016-10-21 12:39:48

回答

相關問題