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

View Code

控制器代碼：

 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 - 1;
                    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 = 0;
            try
            {
                using (YW_CONMISEntities db = new YW_CONMISEntities())
                {
                    var infos = from p in db.DetectionDataite
                                where p.dd_OverWeight > 0 && (string.IsNullOrEmpty(param.srPlateNum) ? true : p.dd_PlateNum.Contains(param.srPlateNum))
                                select p;
                    var info2 = param.itemsPerPage == 0 ? 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 != 0)
                    {
                        datas.pageCount = (int)Math.Ceiling((decimal)(count * 1.0 / param.itemsPerPage));
                    }
                }
                return datas;
            }
            catch (Exception)
            {
                throw;
            }
        }