Contenent未显示在自动完成文本框下

时间:2015-07-29 11:02:44

标签: json model-view-controller autocomplete textbox

我正在使用MVC 4实现自动竞争文本框。根据要求,文本框可以采用多个名称(此处为EmployeeName),以","分隔。 (逗号)。我为控制器编写了以下代码:

public JsonResult EmployeeList(string strEmpName)
        {
            List<string> list = strEmpName.Split(',').ToList();
            list = list.Select(s => s.Trim()).ToList();

            //Extract the term to be searched from the list
            string searchTerm = list.LastOrDefault().ToString().Trim();

            //Return if Search Term is empty
            if (string.IsNullOrEmpty(searchTerm))
            {
                //return new string[0];
            }

            List<string> excludeEmployeeName = new List<string>();
            if (list.Count > 1)
            {
                list.RemoveAt(list.Count - 1);
                excludeEmployeeName = list;
            }

            var query = (EmployeeDAL.GetEmployee().Where(x => x.EmployeeName.StartsWith(searchTerm.ToString().ToUpper()))).ToList();
            var myList = new List<string>();
            foreach (var emp in query.ToList())
            {
                myList.Add(emp.EmployeeName.ToString());
            }
            return Json(myList, JsonRequestBehavior.AllowGet);
        }

上面的函数返回JSON。 数据如下:

public class EmployeeDAL
    {
        public static List<Employee> GetEmployee()
        {
            var empList = new List<Employee>
            {
                new Employee { EmployeeId = "E001", EmployeeName = "Alex", DepartmentId = 1 },
                new Employee { EmployeeId = "E002", EmployeeName = "Alan", DepartmentId = 2 }, 
                new Employee { EmployeeId = "E003", EmployeeName = "Johny", DepartmentId = 3 },
                new Employee { EmployeeId = "E004", EmployeeName = "Joe", DepartmentId = 1 },
                new Employee { EmployeeId = "E005", EmployeeName = "Thomas", DepartmentId = 3 },
                new Employee { EmployeeId = "E006", EmployeeName = "Sarah", DepartmentId = 3 },
                new Employee { EmployeeId = "E007", EmployeeName = "Rahul", DepartmentId = 4 },
                new Employee { EmployeeId = "E008", EmployeeName = "Raman", DepartmentId = 1 },
                new Employee { EmployeeId = "E009", EmployeeName = "Mandy", DepartmentId = 2 },
                new Employee { EmployeeId = "E010", EmployeeName = "Rohit", DepartmentId = 4 },
                new Employee { EmployeeId = "E011", EmployeeName = "Sanjay", DepartmentId = 1 },
                new Employee { EmployeeId = "E012", EmployeeName = "Abhi", DepartmentId = 3 },
                new Employee { EmployeeId = "E013", EmployeeName = "Martin", DepartmentId = 1 },
                new Employee { EmployeeId = "E014", EmployeeName = "Robin", DepartmentId = 2 },
                new Employee { EmployeeId = "E015", EmployeeName = "Rohit", DepartmentId = 1 },
                new Employee { EmployeeId = "E016", EmployeeName = "William", DepartmentId = 3 },
                new Employee { EmployeeId = "E017", EmployeeName = "Sourav", DepartmentId = 2 },
                new Employee { EmployeeId = "E018", EmployeeName = "Alex", DepartmentId = 2 },
            };
            return empList.ToList();
        }
    }

在视图中我编写了以下脚本:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

        <script type="text/javascript">
            $(document).ready(function() {
                SearchText();
            });
            function SearchText() {
                $("#txtEmployeeName").autocomplete({
                    source: function(request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "Employee/EmployeeList",
                            data: "{'strEmpName':'" + extractLast(request.term) + "'}",
                            dataType: "json",
                            success: function(data) {
                                response(data.d);
                            },
                            error: function(result) {
                                alert(result.responseText);
                            }
                        });
                    },
                    focus: function() {
                        // prevent value inserted on focus
                        return false;
                    },
                    select: function(event, ui) {
                        var terms = split(this.value);
                        // remove the current input
                        terms.pop();
                        // add the selected item
                        terms.push(ui.item.value);
                        // add placeholder to get the comma-and-space at the end
                        terms.push("");
                        this.value = terms.join(", ");
                        return false;
                    }
                });
                $("#txtEmployeeName").bind("keydown", function (event) {
                    if (event.keyCode === $.ui.keyCode.TAB &&
                            $(this).data("autocomplete").menu.active) {
                        event.preventDefault();
                    }
                })
                function split(val) {
                    return val.split(/,\s*/);
                }
                function extractLast(term) {
                    return split(term).pop();
                }
            }
        </script>

当我运行应用程序并使用firebug调试json脚本时,我可以看到数据正确地根据我在文本框中键入的字母(txtEmployeeName),但未在浏览器窗口中显示。我已经给出了完整的脚本,以便任何人都可以运行它。

感谢接受任何帮助。

0 个答案:

没有答案