在C#MVC中使用JSON AJAX JQUERY自动完成

本文关键字：JQUERY AJAX JSON C#MVC | 更新日期: 2023-09-27 18:14:06

控制器

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

这里有三类下拉列表1(员工姓名2(员工Id 3(电子邮件Id。默认情况下，当我在搜索栏中键入内容时，它应该在提示中显示员工姓名和电子邮件id。

如果我在类别中选择员工Id并在搜索中键入内容，它应该会找到与键入雇员Id相关的员工姓名，并在下面的建议中显示员工姓名和电子邮件Id

如果我在类别中选择电子邮件Id并在搜索中键入内容，它应该会找到与键入邮件Id相关的员工姓名，并在下面的建议中显示员工姓名和电子邮件Id

既然我是新手，请有人给我解释清楚。

当我使用这个时，我应该在routeconfig中添加一些东西吗。

在C#MVC中使用JSON AJAX JQUERY自动完成

似乎在使用这个->https://help.syncfusion.com/api/js/ejautocomplete

1-有http://help.syncfusion.com/js/autocomplete/data-binding#odata他们似乎使用了DataManager

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

您可以从如下服务器获取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>
相关文章：