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;

            }

        }

巴特西

asp.net mvc 模拟百度搜索

最新文章

热门文章