zoukankan
html css js c++ java
一个输入框提示列表效果
http://bbs.blueidea.com/thread-2832075-1-1.html
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
输入框提示列表效果
</
title
>
<
style
type
="text/css"
>
<!--
body
{
}
{
background
:
#fff
}
.Menu
{
}
{
position
:
relative
;
width
:
204px
;
height
:
127px
;
z-index
:
1
;
background
:
#FFF
;
border
:
1px solid #000
;
margin-top
:
-100px
;
display
:
none
;
}
.Menu2
{
}
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
auto
;
overflow
:
hidden
;
z-index
:
1
;
}
.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="";
}
)
}
input
{
}
{
width
:
200px
}
.form
{
}
{
width
:
200px
;
height
:
auto
;
}
.form div
{
}
{
position
:
relative
;
top
:
0
;
left
:
0
;
margin-bottom
:
5px
}
#List1,#List2,#List3
{
}
{
left
:
0px
;
top
:
93px
;
}
-->
</
style
>
<
script
type
="text/javascript"
>
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
>
</
head
>
<
body
>
<
div
class
="form"
>
<
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
>
<
div
>
Sex:
<
input
type
="text"
id
="txt2"
name
="txt2"
onfocus
="showAndHide('List2','show');"
onblur
="showAndHide('List2','hide');"
></
div
>
<!--
列表2
-->
<
div
class
="Menu"
id
="List2"
>
<
div
class
="Menu2"
>
<
ul
>
<
li
onmousedown
="getValue('txt2','男Male');showAndHide('List2','hide');"
>
男Male
</
li
>
<
li
onmousedown
="getValue('txt2','女Female');showAndHide('List2','hide');"
>
女Female
</
li
>
</
ul
>
</
div
>
</
div
>
<
div
>
education:
<
input
type
="text"
id
="txt3"
name
="txt3"
onfocus
="showAndHide('List3','show');"
onblur
="showAndHide('List3','hide');"
></
div
>
<!--
列表3
-->
<
div
class
="Menu"
id
="List3"
>
<
div
class
="Menu2"
>
<
ul
>
<
li
onmousedown
="getValue('txt3',this.innerText);showAndHide('List3','hide');"
>
大专
</
li
>
<
li
onmousedown
="getValue('txt3','本科');showAndHide('List3','hide');"
>
本科
</
li
>
<
li
onmousedown
="getValue('txt3','硕士');showAndHide('List3','hide');"
>
硕士
</
li
>
<
li
onmousedown
="getValue('txt3','本科');showAndHide('List3','hide');"
>
本科
</
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
输入框提示列表效果
Location:
中国CHINA
美国USA
Sex:
男Male
女Female
education:
大专
本科
硕士
本科
jQuery写的一个类似的:
http://www.huaxia4.com/jq/autofill.htm
查看全文
相关阅读:
Django项目:CRM(客户关系管理系统)--80--70PerfectCRM实现CRM业务流程(bpm)课程排行分页
Django项目:CRM(客户关系管理系统)--79--69PerfectCRM实现CRM业务流程(bpm)学生讲师分页
Django项目:CRM(客户关系管理系统)--78--68PerfectCRM实现CRM业务流程(bpm)报名缴费分页
Django项目:CRM(客户关系管理系统)--77--67PerfectCRM实现CRM课程出勤排名
Django项目:CRM(客户关系管理系统)--76--66PerfectCRM实现CRM课程作业排名
mvc 过滤器
join 和子查询优化
发布mvc遇到的HTTP错误 403.14-Forbidden解决办法
获取post传输参数
iis url 重写
原文地址:https://www.cnblogs.com/CB/p/1135661.html
最新文章
am start的总结,-d参数的总结,以及python中传递内容包含中文及特殊字符&的解决方案
【go语言实现服务器接收http请求以及出现泄漏时的解决方案】
【linux命令总结】——后续用到的内容持续补充和更新
【Android端】代码打包成jar包/aar形式
【Android端ANR卡顿检测】BlockCanary检测
【Android内存泄漏检测】LeakCanary使用总结
二进制八进制十六进制讲解
socket 网络编程笔记 一
老男孩老师的博客地址
Python 字典
热门文章
Python 元组和列表
Python 文件操作
pass 语句
class 函数
def 函数
break、continue 语句
Django项目:CRM(客户关系管理系统)--85--75PerfectCRM实现CRM扩展权限
Django项目:CRM(客户关系管理系统)--84--74PerfectCRM实现CRM权限和权限组限制访问URL
Django项目:CRM(客户关系管理系统)--83--73PerfectCRM实现CRM模板统一
Django项目:CRM(客户关系管理系统)--82--72PerfectCRM实现CRM动态菜单和角色
Copyright © 2011-2022 走看看