文本框提示程序,类似Google智能小提示

    <script type="text/javascript" language="javascript">
    // JScript 文件

var intIndex=0;

arrList = new Array();
arrList[intIndex++] = " 单台采购";
arrList[intIndex++] = " 五台以下";
arrList[intIndex++] = " 十台以下";
arrList[intIndex++] = " 批量采购";
arrList[intIndex++] = " 长期采购";

intIndex=0;
arrListBrand=new Array();
arrListBrand[intIndex++] = " 进口或合资";
arrListBrand[intIndex++] = " 国产品牌";
arrListBrand[intIndex++] = " 没要求但质量可靠";

intIndex=0;
arrListTraffic=new Array();
arrListTraffic[intIndex++] = " EMS";
arrListTraffic[intIndex++] = " 铁路运输";
arrListTraffic[intIndex++] = " 只要按期到货即可";

intIndex=0;
arrListSupply=new Array();
arrListSupply[intIndex++] = " 紧急采购";
arrListSupply[intIndex++] = " 一周到货";
arrListSupply[intIndex++] = "可以商量";


function smanPromptList(arrList,objInputId)
{
    this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;"
    if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
 
    window.onload =function() {
              arrList.sort(function(a,b){
                  if(a.length>b.length)return 1;
                  else if(a.length==b.length)return a.localeCompare(b);
                 else return -1;
            })
    var objouter=document.getElementById("__smanDisp") //显示的DIV对象
    var objInput = document.getElementById(objInputId); //文本框对象
    var selectedIndex=-1;
    var intTmp; //循环用的:)
   
    if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}

     //文本框失去焦点
     objInput.οnblur=function()
     {
       objouter.style.display='none';
     }
 
  //文本框按键抬起
  objInput.οnkeyup=checkKeyCode;
  //文本框得到焦点
  objInput.οnfοcus=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();
        selectedIndex=-1;
        objouter.innerHTML ="";
        for (intTmp=0;intTmp<arrList.length;intTmp++)
         {
          for(i=0;i<arrList[intTmp].length;i++){
           if (arrList[intTmp].substr(i, strInput.length).toUpperCase()==strInput.toUpperCase())
           {
            addOption(arrList[intTmp],strInput);
           }
          }
         }
        objouter.style.display='';
        }
        else if(strInput=="")
        {
         divPosition();
         selectedIndex=-1;
         objouter.innerHTML ="";
         for (intTmp=0;intTmp<arrList.length;intTmp++)
         {  
            addOption(arrList[intTmp],strInput); 
         }
         objouter.style.display='';
        }
        else
        {
          objouter.style.display='none';
        }
       
        function addOption(value,keyw){
            var v=value.replace(keyw,"<b><font color=red>"+keyw+"</font></b>");
            objouter.innerHTML +="<div οnmοuseοver=/"this.className='sman_selectedStyle'/" οnmοuseοut=/"this.className=''/" οnmοusedοwn=/"document.getElementById('"+objInputId+"').value='" + value + "'/">" + v + "</div>"
        }
    }
   
   
    function chageSelection(isUp){
        if (objouter.style.display=='none'){
        objouter.style.display='';
        }else{
            if (isUp)
            selectedIndex++
            else
            selectedIndex--
        }
        var maxIndex = objouter.children.length-1;
        if (selectedIndex<0){selectedIndex=0}
        if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
        for (intTmp=0;intTmp<=maxIndex;intTmp++){

            if (intTmp==selectedIndex){
            objouter.children[intTmp].className="sman_selectedStyle";
            }else{
            objouter.children[intTmp].className="";
            }
        }
    }
   
    function outSelection(Index){
     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)
    }
}

  document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onbulr> </div>");
  document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");

    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
     }
}

alert('asdf');
 //alert((e.currentTarget || document.activeElement).tagName);  
 
  smanPromptList(arrList,"txtnum");

  smanPromptList(arrListBrand,"txtbrand");
   
    </script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值