jquery+MVC 实现類似baidu,google搜索 提示下拉框

1.搜尋頁面.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Ashine.EMS.TZPerformance.Models.TZP_JiXiaoList>" %>

    <%@ import namespace="System.Data" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Create
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        var oinputfield; //考虑到很多函数中都要使用 
        var opopdiv; //因此采用全局变量的形式 
        var ocolorsul;
        function initvars() {
            //初始化变量 
            oinputfield = $("#colors");
            opopdiv = $("#popup");
            ocolorsul = $("#colors_ul");
        }
        function clearcolors() {
            //清除提示内容 
            ocolorsul.empty();
            opopdiv.removeClass("show");
        }
        function setcolors(the_colors) {
            //显示提示框，传入的参数即为匹配出来的结果组成的数组 
            clearcolors(); //每输入一个字母就先清除原先的提示，再继续 
            opopdiv.addClass("show");
            for (var i = 0; i < the_colors.length; i++)
            //将匹配的提示结果逐一显示给用户 
                ocolorsul.append($("<li>" + the_colors[i] + "</li>"));
            ocolorsul.find("li").click(function () {
                oinputfield.val($(this).text());
                clearcolors();
            }).hover(
                    function () { $(this).addClass("mouseover"); },
                    function () { $(this).removeClass("mouseover"); }
                    );
        }
        function findcolors() {
            initvars(); //初始化变量 
            if (oinputfield.val().length > 0) {
                //获取异步数据 
                $.get("../Employee/SelectEmployee", { name: oinputfield.val() },
                                    function (data) {
                                        var aresult = new Array();
                                        if (data.length > 0) {
                                            aresult = data.split(",");
                                            setcolors(aresult); //显示服务器结果 
                                        }
                                        else
                                            clearcolors();
                                    });
            }
            else
                clearcolors(); //无输入时清除提示框（例如用户按del键） 
        } 
    </script>
    <input type="text" name="colors" id="colors" οnkeyup="findcolors();" />
                    <div id="popup">
                        <ul id="colors_ul">
                        </ul>
                    </div>

</asp:Content>

2.ajax 查詢頁面.aspx

<%@  Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Ashine.EMS.TZPerformance.Models.TZP_EmployeeMSG>>" %>
<% 
    Response.CacheControl = "no-cache";
    Response.AddHeader("pragma", "no-cache");
    string sinput = Request["name"].Trim();
    if (sinput.Length == 0)
        return;
    string names = "";
    foreach (var item in Model)
    {
        if (item.EmployeeName.IndexOf(sinput) == 0)
            names += item.EmployeeName + ",";
    }


    if (names.Length > 0) //如果有匹配项 
        names = names.Substring(0, names.Length - 1); //去掉最后的“,”号 
    Response.Write(names); 
%>

3.Controllers頁面.cs

public ActionResult SelectEmployee(string name)
        {
            IQueryable<TZP_EmployeeMSG> n = db.TZP_EmployeeMSG.OrderByDescending(d => d.EmployeeName);
            n = from d in db.TZP_EmployeeMSG
                orderby d.EmployeeName descending
                select d;
            if (Request.IsAjaxRequest())
            {
                return View("SelectEmployee", n.Where(p => p.EmployeeName.Contains(name)));
            }
            return View(n);


        }