使用jquery 实现仿google 的智能提示输入框功能

来源：互联网发布：淘宝收获了怎么退换货编辑：程序博客网时间：2024/05/16 10:59

在仿写OA 项目时，自己想写一个关于企业内部的信件发送模块。

其中，在发送信件时，需要User 在输入框中输入收件人的用户名，或者是收件部门的部门名称。即可以向单个人发送，也可向某个部门的所有人发送信件。这个模块需要提供User一个提示的功能，即用户每输入一个字符，则JSP页面会根据User输入的字符进行匹配并给出提示：

1. 用户按钮松开

2.获取到用户的输入字符串，并到数据库中查找到包含匹配的用户名及部门名称

3.将 “部门名称” “用户名，所属部门名称”分别装进一个tr 中，并将这些tr 装成一个table 来显示在输入框下面。其中单是部门名称不用背景色，而“用户名，所属部门名称”使用红色背景色

4.自动将table下的第一个tr 中的TD 内容覆盖掉输入框内容，同时将补充的内容进行高亮选中显示

5. User 可以通过鼠标滑动table 中的tr ，输入框的值会根据鼠标滑过的TR 取到第一个TD 的值。在鼠标滑过TR 时，tr 的背景色改变以提示User

注：在Firefox 中国版中能够实现除高亮选中补充的字符串外，都能够正常实现

在IE 能够正常实现

技术细节：

1. 输入框侦听键盘弹起的触发事件

$("#filterName").keyup(function(){。。。。。。。。。。}

2. 将table 中tr 的第一个 td 显示到输入框中

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

3.鼠标滑过tr 进行背景色改变：

4. 高亮并选中补充的字符串

所有代码：

$("#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=$("<table id='mytable' />")
        $("#mytable").empty();
         for(var i=0;i<data.length;i++){
         //    alert(data[i][1]);
             $tr=$("<tr id='mytr"+i+"' style='position:relative;left=100px;top:100px;' onmouseover='mymouseover($(this))' onmouseout='mymouseout($(this))'></tr>");
             $tr.attr("id",data[i][0]);
             $td1=$("<td style='width:100px;height:20px' onclick='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' onclick='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);

        }

         }
         ,"json"
         );

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

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


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

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


       }
    })
//    })



})
function mymouseover(entity){

    $this=entity;
    $this.css("background","red");

    $("#filterName").attr("value",$this.children().eq(0).text());

    }
function mymouseout(entity){
    $this=entity;

    if($this.children().size()==2){

       $this.css("background","yellow");
    }
    else
    $this.css("background","white");

}



function setTextSelected(inputDom, startIndex, endIndex)
{

    var FF = (navigator.userAgent.indexOf("Firefox")!=-1);
    if(FF){

    inputDom.setSelectionRange(startIndex, endIndex);

    }
    else{
        inputDom.select();
        var rng=document.selection.createRange();
rng.moveStart("character",startIndex)
rng.moveEnd("character",endIndex)
rng.select();
    }


    inputDom.focus();
}

注：本文没有对添加的table进行CSS样式设置

inputDom.setSelectionRange(startIndex, endIndex); 在firefox 中国版中提示出错：

inputDom.setSelectionRange is not a function

希望有解决办法的读者跟帖回复！谢谢

使用jquery 实现 仿google 的智能提示输入框功能

使用jquery 实现仿google 的智能提示输入框功能