div 光标指定内容移动 滚动条也要随着移动

Question

/**
 * @author 大漠雪狼
 *
 */
/********************************可配置选项********************************/
// 被选中的相似关键字背景颜色
var selectedBgColorcompany = "#CCCCCC";
// 未被选中的相似关键字背景颜色
var unselectedBgColorcompany = "#FFFFFF";
// 相似关键字列表框的边框
var listBordercompany = "1 solid #000000"; 
/***************************************************************************/ 
 
/********************************不可配置选项********************************/

// 上一次输入的关键字（用来判断关键字是否有改变，没有则不再去服务端重新获取提示关键字）
var oldKeyValuecompany;
// 鼠标相对于提示关键字列表框的位置（0：提示框外面，1：提示框里面）
var mouseLocationcompany = 0;
// 当前选中的提示关键字索引（从0开始，等于-1表示没有被选中项）
var selectedKeyIndexcompany = -1; 
// 上一次选中的提示关键字索引（从0开始，等于-1表示没有上次被选中项）
var oldSelectedKeyIndexcompany = -1;
// 提示关键字总数
var tdCountcompany = 0;

/***************************************************************************/

   /*
用途：给String对象添加去除左右空格方法
*/ 
String.prototype.trim = function() {
  var m = this.match(/^\s*(\S+(\s+\S+)*)\s*$/);
  return (m == null) ? "" : m[1];
}

/*
用途:初始化提示关键字列表框的状态
*/ 
function initKeyListState(){
selectedKeyIndexcompany = -1; 
    oldSelectedKeyIndexcompany = -1;
    tdCountcompany = 0;
}

/*
用途:将上一次选中的关键字项变为未选中
*/ 
function disSelectedOldKey(){
       //判断说明：oldSelectedKeyIndex!=selectedKeyIndexcompany
       //        当只有一个相似关键字的时候，则不存在上一次选中和这次选中关键字，
       //        只要第一次选中后，按向上或向下箭头都是选中。
if (oldSelectedKeyIndexcompany!=-1&&oldSelectedKeyIndexcompany!=selectedKeyIndexcompany){
 
   document.getElementById('keyIdcompany'+ oldSelectedKeyIndexcompany).bgColor=unselectedBgColorcompany;
   }
   // 上一次选中项更新
var div=document.getElementById("guestlistDiv");
   oldSelectedKeyIndexcompany = selectedKeyIndexcompany;
//     
//   // alert(div.scrollTop);
//  
//     
//   var divobj=document.getElementById("guestlistDiv");
//    
//   divobj.innerHTML=divobj.innerHTML+document.getElementById("showGuestList").value+"<br>"
//     divobj.scrollTop=divobj.scrollHeight-divobj.offsetHeight;
//     
////     //   var  scrolltop=document.documentElement.scrollTop;
////       // document.documentElement.scrollTop=scrolltop+1;
//       
}

/*
用途:当按上下箭头时选中新的提示关键字项，按回车时将选中的提示关键字输入到搜索框。
*/ 
function setSelectedKey(){
 
// $('keyId0')存在表示有相关提示关键字，不存在则不处理。
if(document.getElementById('keyIdcompany0')){ 
  if (event.keyCode==38){
    //------处理向上事件------
   if (selectedKeyIndexcompany==-1){
    
   selectedKeyIndexcompany = tdCountcompany-1;
   }else{
  
   selectedKeyIndexcompany= (selectedKeyIndexcompany+tdCountcompany-1)%tdCountcompany;
   }
   document.getElementById('keyIdcompany'+ selectedKeyIndexcompany).bgColor= selectedBgColorcompany;
   disSelectedOldKey();
  }else if (event.keyCode==40){
    //------处理向下事件------
   if (selectedKeyIndexcompany==-1){
   selectedKeyIndexcompany = 0;
   }else{
    
   selectedKeyIndexcompany = (selectedKeyIndexcompany+1)%tdCountcompany;
   }
   document.getElementById('keyIdcompany'+ selectedKeyIndexcompany).bgColor= selectedBgColorcompany;
   disSelectedOldKey();
  }else if (event.keyCode==13){
    //------处理回车事件------
  
   document.getElementById('saler').value=document.getElementById('keyIdcompany'+ selectedKeyIndexcompany).innerText;
   setCursorLast(document.getElementById('saler'));
   // 隐藏提示关键字列表框
   document.getElementById('guestlistDiv').style.display='none';
 document.getElementById('ExfundcompanynameSearchIframe').style.display='none';
  }
  }
}








/*
用途:获取相似关键字
*/ 
function getConformKey(){
   
  var keyValue = document.getElementById('saler').value.trim();
 
  // 如果这次的查询关键字和上次的一样，则不去服务器重新获取相似关键字列表。
  if (keyValue!=oldKeyValuecompany){
  
   // 关键字为空则不去服务器获取相似关键字列表
   if (keyValue==''){
   dwr.util.removeAllRows('showGuestList');
   setDropListVisible(false);
   initKeyListState();
   }else{
   //采用ajax异步模式获取相似关键字
   GuestBO.findAllName(keyValue,conformKeyCallback);
   }
  }
}

/*
用途:获取关键字回调方法
*/ 
function conformKeyCallback(keyList){
dwr.util.removeAllRows('showGuestList');
initKeyListState();
if (keyList.length>0){
// 生成相似关键字提示框
dwr.util.addRows('showGuestList',keyList,cellFuncs, { 
cellCreator:function(options) {
  var td = document.createElement("td");
  td.id = 'keyIdcompany' + tdCountcompany++;
           td.onmouseover = function (){
                 selectedKeyIndexcompany=parseInt(this.id.substring(12,td.id.length));this.bgColor=selectedBgColorcompany;disSelectedOldKey();};
  td.onclick= function (){
    document.getElementById('saler').value=this.innerText;
   document.getElementById('saler').focus();
 setCursorLast(document.getElementById('saler'));
GuestBO.getSearchName(this.innerText,callbaskguest);

document.getElementById('guestlistDiv').style.display='none';
      document.getElementById('ExfundcompanynameSearchIframe').style.display='none';
 

  };
  return td;
},escapeHtml:false});
setDropListVisible(true);
}else{
  
setDropListVisible(false);
}

}
 
function callbackcode(data){

var objSelect = document.myform.contractno;
   if(data!=null ){
objSelect.length = 0;

for(var i=0;i<data.length;i++){
var varItem = new Option(data[i].contractcode, data[i].contractcode);
          objSelect.options.add(varItem);        
          
}
}
else{
 var varItem = new Option('无', 0);
         objSelect.options.add(varItem);
}
 
 


}

 function SearchContract(){

var objSelect = document.myform.contractno;
var isContract = document.myform.isContract;
  if(isContract.checked){
 document.getElementById('contractno').disabled=false;
var saler=document.getElementById('saler').value;
contractJS.getcontractcode(saler,callbackcode);
 document.myform.isContract.value=1;
}
if(!isContract.checked){
 document.myform.isContract.value=0;
   document.getElementById('contractno').disabled=true;
document.all("contractno").options.length=0;  
}
}
 




function clearcompanyname(){
var names= document.myform.saler.value;
 
GuestBO.findAllName(names,callbackscompany);
 
}

function callbackscompany(keyList){
if(keyList==0){
           document.myform.saler.value ='';
 
}
}




 

function callbaskguest(data){
 if(data!=null){

  document.myform.saler.value = data.name;
  document.all("contractno").options.length=0;
   document.getElementById('contractno').disabled=true;
  document.getElementById('isContract').checked =false;
   
  }

}


/*
用途:表格数据显示处理方法
*/ 
var cellFuncs = [
  function(data) { return data; }
];

/*
用途:将输入框的光标移到最后
*/ 
function setCursorLast(inputObj){
var inputRange = inputObj.createTextRange();  
inputRange.collapse(true);
inputRange.moveStart('character',inputObj.value.length); 
inputRange.select();
}


/*
用途:创建相似关键字列表框
*/ 
function createShowDiv(){ var showIframeeExfundcompanyname = document.createElement("iframe");
showIframeeExfundcompanyname.id = "ExfundcompanynameSearchIframe";  
  with(showIframeeExfundcompanyname.style){ 
var oRect = document.getElementById('saler').getBoundingClientRect(); 
left=oRect.left;
top=oRect.top+20;
//left=300;
//top=300; 
width=283;
       border = listBordercompany;  
       zIndex = "1";      
       position = "absolute";   
       display='none';
       backgroundColor = unselectedBgColorcompany;   
    }
showIframeeExfundcompanyname.onmouseover=function (){mouseLocation=1;};
showIframeeExfundcompanyname.onmouseout=function (){mouseLocation=0;};

document.body.appendChild(showIframeeExfundcompanyname);
 
  var showDiv = document.createElement("div");
showDiv.id = "guestlistDiv";   
with(showDiv.style){ 
var oRect = document.getElementById('saler').getBoundingClientRect(); 
left=oRect.left;
top=oRect.top+20;
//left=300;
//top=300; 
width=283;
       border = listBordercompany;  
       zIndex = "1";      
       position = "absolute";   
       display='none';
       backgroundColor = unselectedBgColorcompany;   
    }
    showDiv.onmouseover=function (){mouseLocationcompany=1;};
    showDiv.onmouseout=function (){mouseLocationcompany=0;};
    showDiv.innerHTML = "<div     style='width:100%;height:150px;overflow:auto;'><table border='0' style='width: 100%;font-size: 12;'><tbody id='showGuestList' style='color:#000000;margin-left: 0;margin-right: 0;margin-bottom: 0;margin-top: 0;'></tbody></table></div>";
document.body.appendChild(showDiv);
initKeyListState();
}  

/*
用途:设置相似关键字列表框是否可见
参数：isDisplay，true表示可见，false表示不可见
*/ 
function setDropListVisible(isDisplay){
 
if (mouseLocationcompany == 1){
return;
}
if ((document.getElementById('saler').value.trim()!='')&&(isDisplay==true)){
 
document.getElementById('guestlistDiv').style.display='';
 document.getElementById('ExfundcompanynameSearchIframe').style.display='';
}
else{


  document.getElementById('guestlistDiv').style.display='none';
  document.getElementById('ExfundcompanynameSearchIframe').style.display='none';
}
}
function getPosLeft(obj)
{
    var l = obj.offsetLeft;
    while(obj = obj.offsetParent)
    {
        l += obj.offsetLeft;
    }
    return l;
}  function getPosTop(obj)
{
    var l = obj.offsetTop;
    while(obj = obj.offsetParent)
    {
        l += obj.offsetTop;
    }
    return l;
} 
        

Answer 1

上面是导入的js页面<input  type="text" id="saler"  name="saler"     class="wenziyu2"  size="25" autocomplete="off"  
onKeyDown="oldKeyValuecompany=this.value.trim();setSelectedKey();"   
 onKeyUp="getConformKey();" onFocus="createShowDiv();setDropListVisible(true);" onBlur="setDropListVisible(false); clearcompanyname();" style="width: 280; height: 20;z-index: 10;top: 0;left: 0;"   想要加入 选中层的内容 按上下键 时 滚动条随着光标移动，上面的还有很多小bug 高手帮忙修改下