使用jquery 实现仿google 的智能提示输入框功能 (改进版本)

最新推荐文章于 2019-09-09 19:29:16 发布

veverrr

最新推荐文章于 2019-09-09 19:29:16 发布

阅读量2.6k

点赞数

文章标签： google jquery autocomplete table function json

本文链接：https://blog.csdn.net/veverrr/article/details/6106715

版权

在上一个版本中的仿google 智能提示输入框中存在以下缺点：

1. 提示框没有明显提示说明这是一个提示框

2.如果提示框中数据量较大，则全部显示出来会使提示框的Heiht 非常大

3.浏览器的Cookie 会在用户鼠标进入输入框时，自动给出之前的输入提示，在界面上与智能提示造车了冲突。

为此，需要做出相应的改进：

1.禁止输入框根据cookie 内容进行提示

在输入框代码中添加：

autocomplete="off"

2. 给智能提示框具备上下滚动条效果，为智能提示框添加边框，并制定其初始长度和高度和隐藏属性

3.如果智能提示框中数据只有少数几行，则修改提示框的高度，使其不需要滚动条就可以全部显示出所有提示

如果智能提示框数据超过7行，则重置提示框高度，使其使用滚动条来显示提示

如何提示框具备自适应高度呢？获取出提示框中table 的高度即可。但在这里不能简单使用 table.offsetHeight ,而是将table中

每行高度*行数来确定table 的高度：

    $("#mytable").append($mytable);
         $tableHeight=data.length*20;
        if($tableHeight<150){
             $("#mytable").css("height",$tableHeight);
        }
        else{
            $("#mytable").css("height","150px");
        }

所有代码如下：

    $("#filterName").keyup(function(){
       $inputValue=$(this).val();
       if($inputValue.length>1){
         $url2="messageAction!filterName.action?filterString="+$(this).val();
         $.post(
         $url2,
         function(json){
         var data=eval('('+json.theaterString+')');
          $("#mytable").show();
        $mytable=$("<table id='mytable' />")
        $("#mytable").empty();
         for(var i=0;i<data.length;i++){
         //    alert(data[i][1]);
             $tr=$("<tr id='mytr"+i+"'   οnmοuseοver='mymouseover($(this))' οnmοuseοut='mymouseout($(this))'></tr>");
             $tr.attr("id",data[i][0]);
             $td1=$("<td style='width:100px;height:20px' οnclick='myclick($(this))' class='myrow'></td");
             $td1.attr("value",data[i][1]).append(data[i][1]);
             $tr.append($td1);
             if(data[i][2]!=null){

                 $td2=$("<td style='width:100px;height:20px' οnclick='myclick($(this))' class='myrow' mynumber='2'></td");
             $td2.attr("value",data[i][2]).append(data[i][2]);
             $tr.css("background","yellow");
             $tr.append($td2);
             }
             $mytable.append($tr);

        }
         $("#mytable").append($mytable);
         $tableHeight=data.length*20;
        if($tableHeight<150){
             $("#mytable").css("height",$tableHeight);
        }
        else{
            $("#mytable").css("height","150px");
        }
         }
         ,"json"
         );

         $mytr0=$("tr").eq(0);

          if($("tr").eq(0).children().size()>0){
    $("#filterName").attr("value",$mytr0.children().eq(0).text());

        if($("tr").eq(0).children().size()==2){

            $("#groupOrPersonId").attr("value","Person");
        }
        else {
            $("#groupOrPersonId").attr("value","Group");
        }
         }


    //     $selectText=$("#filterName").val().replace(/"+$inputValue+"/,"");
    //    alert($selectText);
       // alert($("#filterName").val());
         $startNum=$inputValue.length;

         setTextSelected($("#filterName"),$startNum,100);
    //       functionselRange($("#filterName"),$startNum,100);


       }
    })