zoukankan      html  css  js  c++  java
  • 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 (Entities db = new Entities())
                    {
    
                        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 (Entities db = new Entities())
                    {
                        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;
                }
            }
  • 相关阅读:
    hihoCoder #1062 : 最近公共祖先·一
    hihoCoder #1050 : 树中的最长路
    hihoCoder #1049 : 后序遍历
    108 Convert Sorted Array to Binary Search Tree 将有序数组转换为二叉搜索树
    107 Binary Tree Level Order Traversal II 二叉树的层次遍历 II
    106 Construct Binary Tree from Inorder and Postorder Traversal 从中序与后序遍历序列构造二叉树
    105 Construct Binary Tree from Preorder and Inorder Traversal 从前序与中序遍历序列构造二叉树
    104 Maximum Depth of Binary Tree 二叉树的最大深度
    102 Binary Tree Level Order Traversal 二叉树的层次遍历
    101 Symmetric Tree 判断一颗二叉树是否是镜像二叉树
  • 原文地址:https://www.cnblogs.com/codehistory/p/11459057.html
Copyright © 2011-2022 走看看