zoukankan      html  css  js  c++  java
  • 仿百度搜索功能

    /**
     *鼠标选中某个li方法
     *1.参数obj:this
     */
    function ulLiText(obj) {
        //检索条件可按名称字母查询
        $("#nameZm").val($(obj).text());
        //调用省级列表
        getAreaList();
        //隐藏检索信息
        $("#carName").hide();
    }

    //显示背景颜色
     $('#carName ul li').mouseover(function () {
            $(this).css("backgroundColor", "white");
        }).mouseout(function () {
            $(this).css("backgroundColor", "");
        });


            var i = -1;

                    //键盘操作
                    $(document).keyup(function (event) {

                        var num = Number($("#indexUl").val());
                        i = Number($("#indexUl").val());

                        if (event.keyCode == 13) {
                            //一组li的长度
                            var lenLi = $("#ulCarName li").length;

                            for (var i = 0; i < lenLi; i++) {
                                if (i == Number($("#indexUl").val())) {

                                    $("#nameZm").val($("#ulCarName .li_" + i).text());
                                    //调用省级列表
                                    var currentIndex = $("#currentIndex").val();
                                    //查询条件
                                    var nameZm = $("#nameZm").val();
                                    var list = {
                                        nameZm: nameZm,
                                        pageIndex: currentIndex
                                    }
                                    getAreaList(list);
                                    //隐藏检索信息
                                    $("#carName").hide();
                                }
                            }
                        } //向下
                        else if (event.keyCode == 40) {
                            //如果等于索引等于总行数
                            if ((Number($("#countRows").val()) - 1) == Number($("#indexUl").val())) {
                                i = -1;
                            }
                            i += 1;
                            $("#ulCarName .li_" + i).css("backgroundColor", "gray");
                            //隐藏域存储li的索引
                            $("#indexUl").val(i);
                        } //向上
                        else if (event.keyCode == 38) {
                            //如果等于索引等于0
                            if (num == 0) {
                                num = Number($("#countRows").val());
                            }
                            num = num - 1;
                            $("#ulCarName .li_" + num).css("backgroundColor", "gray");
                            //隐藏域存储li的索引
                            $("#indexUl").val(num);
                        };
                    });

                    //显示检索内容
                    if ($("#nameZm").val() != "") {
                        // $("#carName").show();
                        for (var i = 0; i < resultData.length; i++) {
                            hmt += '<li onclick="ulLiText(this)" class="li_' + i + '"><a style="color:#000;">' + resultData[i].ReMark + '</a></li>'
                        }
                        //显示检索内容
                        $("#ulCarName").empty().append(hmt);
                        //隐藏域存值
                        $("#countRows").val(resultData.length);
                        //鼠标悬浮加背景颜色
                        $('#carName ul li').mouseover(function () {
                            $(this).css("backgroundColor", "gray");
                        }).mouseout(function () {
                            $(this).css("backgroundColor", "");
                        });
                    }

  • 相关阅读:
    浅谈数论
    浅谈数论
    bzoj2190 [SDOI2008]仪仗队
    bzoj2190 [SDOI2008]仪仗队
    35.QQ大数据模型
    34.函数指针数组和多线程
    33.函数指针相关问题
    32.分配数组的方式
    31.内存分配四大函数以及栈上分配内存
    30.锯齿数组
  • 原文地址:https://www.cnblogs.com/wangtiantian/p/4987355.html
Copyright © 2011-2022 走看看