asp.net mvc 模拟百度搜索

页面代码：

<td><span>*</span>车牌号码：</td>
                <td>
                    <div id="search">
                        <label></label>
                        <input type="text" id="search-text" name="search-text" />
                        @*<input type="button" id="submit" value="搜索" />*@
                        <span class="ddPlateNum"></span>
                    </div>

                </td>

js代码：

 //取得div层
    var $search = $('#search');
    //取得输入框JQuery对象
    var $searchInput = $search.find('#search-text');
    //取得车牌id
    var ddId;

    //关闭浏览器提供给输入框的自动完成
    $searchInput.attr('autocomplete', 'off');
    //创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置
    var $autocomplete = $('<div class="autocomplete"></div>')
        .hide()
        .insertAfter('.ddPlateNum');
    //清空下拉列表的内容并且隐藏下拉列表区
    var clear = function () {
        $autocomplete.empty().hide();
    };
    //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
    $searchInput.blur(function () {
        setTimeout(clear, 500);
    });
    //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样
    var selectedItem = null;
    //timeout的ID
    var timeoutid = null;
    //设置下拉项的高亮背景
    var setSelectedItem = function (item) {
        //更新索引变量
        selectedItem = item;
        //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0
        if (selectedItem < 0) {
            selectedItem = $autocomplete.find('li').length - 1;
        } else if (selectedItem > $autocomplete.find('li').length - 1) {
            selectedItem = 0;
        }
        //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
        $autocomplete.find('li').removeClass('highlight')
            .eq(selectedItem).addClass('highlight');
    };
    var ajax_request = function () {

        //var name = $("#search-text").val();
        //console.log(name);
        //ajax服务端通信
        $.ajax({
            url: "/OverLimitDetectBusiness/QueryPlate", //服务器的地址
            data: { plateNum: $("#search-text").val(), pageSize: 5, pageIndex: 1 }, //参数
            dataType: 'json', //返回数据类型
            type: 'POST', //请求类型
            success: function (data) {
                //console.log(data);
                if (data.infoList.length > 0) {
                    $autocomplete.empty();
                    //遍历data，添加到自动完成区
                    $.each(data.infoList, function (index, term) {

                        //创建li标签,添加到下拉列表中
                        $('<li></li>').text(term.srPlateNum).appendTo($autocomplete)
                            .addClass('clickable')
                            .hover(function () {
                                //下拉列表每一项的事件，鼠标移进去的操作
                                $(this).siblings().removeClass('highlight');
                                $(this).addClass('highlight');
                                selectedItem = index;
                            }, function () {
                                //下拉列表每一项的事件，鼠标离开的操作
                                $(this).removeClass('highlight');
                                //当鼠标离开时索引置-1，当作标记
                                selectedItem = -1;
                            })
                            .click(function () {
                                //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
                                $searchInput.val(term.srPlateNum);
                                $searchInput.attr("ddIds", term.srDdId);
                                ddId = $("#search-text").attr("ddIds");
                                $(".ddPlateNum").empty();
                                //QueryStoreRegByddId(ddId);
                                //alert(ddId);
                                //清空并隐藏下拉列表
                                $autocomplete.empty().hide();
                            });
                    }); //事件注册完毕
                    //设置下拉列表的位置，然后显示下拉列表
                    var ypos = $searchInput.position().top;
                    var xpos = $searchInput.position().left;
                    $autocomplete.css('width', $searchInput.css('width'));
                    $autocomplete.css({
                        'position': 'relative',
                        'left': xpos + "px",
                        'top': ypos + "px"
                    });
                    setSelectedItem(0);
                    //显示下拉列表
                    $autocomplete.show();
                }
            }
        });
    };
    //对输入框进行事件注册
    $searchInput.keyup(function (event) {
        //字母数字，退格，空格
        if (event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32) {
            //首先删除下拉列表中的信息
            $autocomplete.empty().hide();
            clearTimeout(timeoutid);
            timeoutid = setTimeout(ajax_request, 100);
        } else if (event.keyCode == 38) {
            //上
            //selectedItem = -1 代表鼠标离开
            if (selectedItem == -1) {
                setSelectedItem($autocomplete.find('li').length - 1);
            } else {
                //索引减1
                setSelectedItem(selectedItem - 1);
            }
            event.preventDefault();
        } else if (event.keyCode == 40) {
            //下
            //selectedItem = -1 代表鼠标离开
            if (selectedItem == -1) {
                setSelectedItem(0);
            } else {
                //索引加1
                setSelectedItem(selectedItem + 1);
            }
            event.preventDefault();
        }
    })
        .keypress(function (event) {
            //enter键
            if (event.keyCode == 13) {
                //列表为空或者鼠标离开导致当前没有索引值
                if ($autocomplete.find('li').length == 0 || selectedItem == -1) {
                    return;
                }
                $searchInput.val($autocomplete.find('li').eq(selectedItem).text());
                $autocomplete.empty().hide();
                event.preventDefault();
            }
        })
        .keydown(function (event) {
            //esc键
            if (event.keyCode == 27) {
                $autocomplete.empty().hide();
                event.preventDefault();
            }
        });
    //注册窗口大小改变的事件，重新调整下拉列表的位置
    //$(window).resize(function () {
    //    var ypos = $searchInput.position().top;
    //    var xpos = $searchInput.position().left;
    //    $autocomplete.css('width', $searchInput.css('width'));
    //    $autocomplete.css({
    //        'position': 'relative',
    //        'left': xpos + "px",
    //        'top': ypos + "px"
    //    });
    //});
    var userIs = false;
    $("#search-text").on("blur", function (e) {
        textVerification(plateNum, $(".ddPlateNum"), $("#search-text").val().trim());
        //$(".ddPlateNum").empty();
        //if ($(this).val() != "") {
        //    var liUserName = $(".autocomplete li");
        //    for (var i = 0; i < liUserName.length; i++) {
        //        if ($(this).val() == liUserName[i].innerText) {
        //            userIs = true;
        //        }
        //    }
        //    //if (!userIs) {
        //    //    $(".ddPlateNum").append("<img src='/Images/validateFalse.png'/> &nbsp没有对应的车牌号");

        //    //} else {
        //    //    $(".ddPlateNum").empty();
        //    //}

        //} else {

        //}
        //setTimeout(function () {
        //    $("#changeUser").hide();
        //}, 200);
    })

控制器代码：

 public ActionResult QueryPlate(string plateNum, int pageSize, int pageIndex)
        {

            StoreRegData creditInfor = new StoreRegData();
            try
            {
                using (YW_CONMISEntities db = new YW_CONMISEntities())
                {

                    StoreRegFilterParam storeReg = new StoreRegFilterParam();
                    storeReg.currentPage = pageIndex - ;
                    storeReg.itemsPerPage = pageSize;
                    storeReg.srPlateNum = plateNum;
                    creditInfor = store_util.SelectAllPlateName2(storeReg);
                }

            }
            catch (Exception ex)
            {
                CSysCfg.WriteLog(ex.Message);
            }
            return Json(creditInfor);
        }

后台代码：

  public StoreRegData SelectAllPlateName2(StoreRegFilterParam param)
        {
            StoreRegData datas = new StoreRegData();
            List<StoreRegInfo> infoList = new List<StoreRegInfo>();
            //List<DetectionDataite> info = new List<DetectionDataite>();
            int count = ;
            try
            {
                using (YW_CONMISEntities db = new YW_CONMISEntities())
                {
                    var infos = from p in db.DetectionDataite
                                where p.dd_OverWeight >  && (string.IsNullOrEmpty(param.srPlateNum) ? true : p.dd_PlateNum.Contains(param.srPlateNum))
                                select p;
                    var info2 = param.itemsPerPage ==  ? infos.ToList()
                          : infos.OrderBy(p => p.dd_Detectionid).Skip(param.itemsPerPage * param.currentPage).Take(param.itemsPerPage).ToList();
                    count = infos.Count();
                    foreach (var item in info2)
                    {
                        StoreRegInfo edata = new StoreRegInfo()
                        {
                            srDdId = item.dd_Detectionid,
                            srPlateNum = item.dd_PlateNum
                        };
                        infoList.Add(edata);
                    }
                    datas.currentPage = param.currentPage;
                    datas.itemCount = count;
                    datas.infoList = infoList;
                    if (param.itemsPerPage != )
                    {
                        datas.pageCount = (int)Math.Ceiling((decimal)(count * 1.0 / param.itemsPerPage));
                    }
                }
                return datas;
            }
            catch (Exception)
            {
                throw;
            }
        }