开发遇到的问题与启发（二）

1.学会多使用已经封装好的组件bootstrap，文档如下：

https://v4.bootcss.com/docs/components/tooltips/

2.JS中复选框checkbox的选中与未选中事件判断：

html中代码为：

<input type="checkbox" name="consultAndTree" class="hideConsult">1
<input type="checkbox" name="consultAndTree" class="hideTree">2

JS中代码为：

 $(".hideConsult").click(function(){
        if(this.checked==true)
        {
            console.log("选中了");
            $("#consult").css("display", "none");
        }
        else {
            console.log("没选中");
        }
    })


    $(".hideTree").click(function(){
        if(this.checked==true)
        {
            console.log("选中了");
        }
        else {
            console.log("没选中");
        }
    })

3.元素有的重叠显示，设置前后的优先级：

                $("#aa").css("z-index", "99999");

4.模糊搜索

使用keyup事件的话，为了实现实时监听，可以用bind。
（我的代码中的元素全是动态获得的id）

     $("#attr"+number+"").bind("keyup",function(evt){
            ChangeCoords(this);//获得此时输入框的坐标，为的是在显示框下正确地显示
            if ($("#attr"+number+"").text() != "") {
                let keysword=$("#attr"+number+"").text();
                $.ajax({
                    type: 'GET',
                    async: true, //同步执行，不然会有问题
                    dataType: "json",
                    url: "/Annotation/getrela?key="+keysword,
                    error: function (msg) {//请求失败处理函数
                        alert("数据加载失败");
                    },
                    success: function (data) { //请求成功后处理函数
                        console.log(data);
                        if (data.length > 0) {
                            var layer = "";
                            layer = "<table id='aa'>";
                            for(let i=0;i<data.length;i++)
                            {
                                layer += "<tr class='line'><td class='queryTable'>" + data[i] + "</td></tr>";
                            }
                            layer += "</table>";
                            //将结果添加到div中
                            $("#searchresult").empty();
                            $("#searchresult").append(layer);

                            //先加进去之后再变，改变
                            $("#aa").css("z-index", "99999");
                            $(".line:first").addClass("hover");
                            $("#searchresult").css("display", "block");

                            //鼠标移动事件
                            $(".line").hover(function () {
                                $(".line").removeClass("hover");
                                $(this).addClass("hover");
                            }, function () {
                                $(this).removeClass("hover");
                            });
                            //鼠标点击事件
                            $(".line").click(function () {
                                let valueText=$(this).text();
             document.getElementById("attr"+number+"").innerHTML=valueText;
                                $("#searchresult").css("display", "none");
                            });
                        }
                        else {
                            $("#searchresult").empty();
                            $("#searchresult").append("该属性不属于库中属性");
                        }
                    }
                });
            }
            else {

                $("#searchresult").empty();
                $("#searchresult").css("display", "none");
            }
        });
         function ChangeCoords(obj) {
        var left1 =obj.offsetLeft; //获取距离最左端的距离，像素，整型
        var top1 =obj.offsetTop + 40; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
        //改变坐标
        var o = document.getElementById("searchresult");
        o.style.left=left1+"px";
        o.style.top=top1+"px";
    }

模糊查询地代码以及思路大部分来自博文https://www.cnblogs.com/jiangbei/p/7404349.html，只不过因为不是动态获取ID，导致在我的需求下，一些函数用不了。