学习一个输入框提示列表效果

学习一个输入框提示列表效果记录下

主要要点：li列背景换行变色

.Menu2 ul { margin : 0 ; padding : 0 }
.Menu2 ul li { width : 100% ; height : 25px ; line-height : 25px ; text-indent : 15px ;
             border-bottom : 1px dashed #ccc ; color : #666 ; cursor : pointer ;
 change : expression(
  this.onmouseover=function(){
    this.style.background="#F2F5EF" ;
   } ,
  this.onmouseout=function() {
    this.style.background="";
   }
 )
}

主要js代码

 

< script type = " text/javascript " >
function  showAndHid(obj,types)
{
   var  Layer = window.document.getElementById()
}
   function  showAndHide(obj,types){
     var  Layer = window.document.getElementById(obj);
     switch (types){
   case   " show " :
    Layer.style.display = " block " ;
   break ;
   case   " hide " :
    Layer.style.display = " none " ;
   break ;
}
  }
   function  getValue(obj,str){
     var  input = window.document.getElementById(obj);
input.value = str;
  }
< / script>

body里调用

 

< div >  Location： < input  type ="text"  id ="txt"  name ="txt"  onfocus ="showAndHide('List1','show');"  onblur ="showAndHide('List1','hide');" ></ div >
    <!-- 列表1 -->
    < div  class ="Menu"  id ="List1" >
   < div  class ="Menu2" >
     < ul >
   < li  onmousedown ="getValue('txt','中国CHINA');showAndHide('List1','hide');" > 中国CHINA </ li >
   < li  onmousedown ="getValue('txt','美国USA');showAndHide('List1','hide');" > 美国USA </ li >
</ ul >
   </ div >
    </ div >

全部例子代码：下载