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

在仿写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 进行背景色改变：

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");

}

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

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();
}

所有代码：

$("#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

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