在仿写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;' ο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);
}
}
,"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
希望有解决办法的读者跟帖回复!谢谢