<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='/dwr/interface/jsuser.js'></script>  
<script type='text/javascript' src='/dwr/engine.js'></script>  
<script type='text/javascript' src='/dwr/util.js'></script>  
<script>
function smanPrompt(obj){
var objouter = document.getElementById("__smanDisp") //显示的DIV对象
var objInput = document.getElementById(obj.id); //文本框对象
var selectedIndex = -1;
var intTmp; //循环用的
//文本框失去焦点
objInput.onblur = function()
{
 objouter.style.display = 'none';
}
window.onfocus = function(){
 objouter.style.display = 'none';
}
//文本框按键抬起
objInput.onkeyup = checkKeyCode;
//文本框得到焦点
objInput.onfocus = checkAndShow;
function checkKeyCode()
{
 var ie = (document.all) ? true : false
 if (ie)
 {
  var keyCode = event.keyCode
  if (keyCode == 40 || keyCode == 38)
  { //下上
   var isUp = false
   if (keyCode == 40)
    isUp = true;
   chageSelection(isUp)
  }
  else
   if (keyCode == 13)
   {//回车
    outSelection(selectedIndex);
   }
   else
   {
    checkAndShow()
   }
 }
 else
 {
  checkAndShow()
 }
 divPosition()
}
function checkAndShow()
{
 var strInput = objInput.value
 if (strInput != "") {
  divPosition();
  objouter.innerHTML = "";
  bOnClick();
 }
 else {
  objouter.style.display = 'none';
 }

 function bOnClick()  
 {  
   jsuser.getKeyHTMl(strInput,callback); 
 }  
 function callback(msg)  
 {  
  objouter.innerHTML = msg;
  if(msg=="")
  {
   objouter.style.display = 'none';
  }else
  {
   objouter.style.display = '';
  }
 }  
  
}
function chageSelection(isUp){
 if (objouter.style.display == 'none'&& objInput.value !="" && objouter.innerHTML!="")
 {
  objouter.style.display = '';
 }
 else {
  if (isUp)
   selectedIndex++
  else
   selectedIndex--
 }
 var maxIndex = objouter.children.length - 1;
 if (selectedIndex < 0) {
  selectedIndex = -1
 }
 if (selectedIndex > maxIndex) {
  selectedIndex = 0
 }
 for (intTmp = 0; intTmp <= maxIndex; intTmp++) {
  if (intTmp == selectedIndex) {
   objouter.children[intTmp].className = "sman_selectedStyle";
  }
  else {
   objouter.children[intTmp].className = "";
  }
 }
}
function outSelection(Index){
 if (!objouter.children[Index])
  return;
 objInput.value = objouter.children[Index].innerText;
 objouter.style.display = 'none';
}
function divPosition(){
 objouter.style.top = getAbsoluteHeight(objInput) + getAbsoluteTop(objInput);
 objouter.style.left = getAbsoluteLeft(objInput);
 objouter.style.width = getAbsoluteWidth(objInput)
}

function getAbsoluteHeight(ob)
{
 return ob.offsetHeight
}
function getAbsoluteWidth(ob)
{
 return ob.offsetWidth
}
function getAbsoluteLeft(ob)
{
 var s_el = 0;
 el = ob;
 while (el) {
  s_el = s_el + el.offsetLeft;
  el = el.offsetParent;
 };
 return s_el
}
function getAbsoluteTop(ob)
{
 var s_el = 0;
 el = ob;
 while (el) {
  s_el = s_el + el.offsetTop;
  el = el.offsetParent;
 };
 return s_el
}
}

</script>
<style>
.inp {border: 1px solid #999;padding: 0px 0 0 2px;height: 23px;line-height: 23px;font-size: 14px;color: #666}
.inp.sffocus {background: #fff;border: 1px solid #f90;color: blue;}
.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}
</style>
<input name="textinput" onfocus="smanPrompt(this)"  tabindex="1" type="text" size="45" class="inp" value="" id="inputer" />
<div id="__smanDisp" style="position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;onbulr"> </div>



 public String getKeyHTMl(String key)
    {
     //System.out.println(key);
     String temp = "";
     Pattern p = Pattern.compile("^("+key+")");//<[^>]+>
     Matcher m = null;
     for(int i=0; i<keyarry.length; i++)
     {
       m = p.matcher(keyarry[i]);
      if(m.find())
      {
       temp = temp + "<div onmouseover=\"this.className='sman_selectedStyle'\" " +
    "onmouseout=\"this.className=''\" " +
    "onmousedown=\"document.getElementById('inputer').value='" + keyarry[i] + "';window.focus();\">" + keyarry[i].replace(key, "<font color=red>"+key+"</font>") + "</div>";
      }
     }
     return temp;
    }