会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
临渊羡鱼,不如退而结网。
导航
博客园
首页
新随笔
联系
订阅
管理
公告
今天要为自己的网站添加一个动态检索信息的下拉提示框,这个是在网上找的例子。
Posted on
2006-06-13 14:33
cowboy
阅读(
789
) 评论(
2
)
编辑
收藏
举报
<
html
>
<
head
>
<
meta http
-
equiv
=
"
Content-Type
"
content
=
"
text/html; charset=gb2312
"
>
<
META content
=
"
fason,阿信
"
name
=
Author
>
<
title
>
动态提示的下拉框
</
title
>
<
style
>
a
{color:red;text
-
decoration:none;font
-
size:12px}
</
style
>
</
head
>
<
body onload
=
"
Init()
"
>
<
center
>
<
h2
>
动态提示的下拉框
</
h2
>
<
hr
>
<
form name
=
frm
>
<
table
>
<
tr
>
<
td
>
请输入1或2或3或4或5进行测试:
<
br
><
input name
=
"
txt
"
style
=
"
width:100px
"
onkeyup
=
"
SelectTip(0)
"
>
<
input type
=
"
button
"
value
=
"
reset
"
onclick
=
"
SelectTip(1)
"
></
td
>
</
tr
>
<
tr
>
<
td
>
<
span id
=
"
demo
"
><
select name
=
"
demo
"
style
=
"
width:100px
"
size
=
10
onchange
=
"
txt.value=options[selectedIndex].text;
"
>
<
option value
=
"
1
"
>
1
</
option
>
<
option value
=
"
12
"
>
12
</
option
>
<
option value
=
"
123
"
>
123
</
option
>
<
option value
=
"
1234
"
>
1234
</
option
>
<
option value
=
"
2
"
>
2
</
option
>
<
option value
=
"
23
"
>
23
</
option
>
<
option value
=
"
234
"
>
234
</
option
>
<
option value
=
"
2345
"
>
2345
</
option
>
<
option value
=
"
3
"
>
3
</
option
>
<
option value
=
"
34
"
>
34
</
option
>
<
option value
=
"
345
"
>
345
</
option
>
<
option value
=
"
3456
"
>
3456
</
option
>
<
option value
=
"
5
"
>
5
</
option
>
<
option value
=
"
51
"
>
51
</
option
>
<
option value
=
"
51w
"
>
51w
</
option
>
<
option value
=
"
51wi
"
>
51wi
</
option
>
<
option value
=
"
51win
"
>
51win
</
option
>
<
option value
=
"
51windows
"
>
51windows
</
option
>
</
select
></
span
>
</
td
>
</
tr
>
</
form
>
</
table
>
<
hr
>
<
script language
=
"
javascript
"
>
var
TempArr
=
[];
//
存贮option
function
Init()
{
var
SelectObj
=
document.frm.elements[
"
demo
"
]
/**/
/*
先将数据存入数组
*/
with
(SelectObj)
for
(i
=
0
;i
<
length;i
++
)TempArr[i]
=
[options[i].text,options[i].value]
}
function
SelectTip(flag)
{
var
TxtObj
=
document.frm.elements[
"
txt
"
]
var
SelectObj
=
document.getElementById(
"
demo
"
)
var
Arr
=
[]
with
(SelectObj)
{
var
SelectHTML
=
innerHTML.match(
/<
[
^>
]
*>/
)[
0
]
for
(i
=
0
;i
<
TempArr.length;i
++
)
if
(TempArr[i][
0
].indexOf(TxtObj.value)
==
0
||
flag)
//
若找到以txt的内容开头的,添option。若flag为true,对下拉框初始化
Arr[Arr.length]
=
"
<option value='
"
+
TempArr[i][
1
]
+
"
'>
"
+
TempArr[i][
0
]
+
"
</option>
"
innerHTML
=
SelectHTML
+
Arr.join()
+
"
</SELECT>
"
}
}
</
script
>
</
body
>
<
script language
=
"
javascript
"
>
var
intIndex
=
0
;arrList
=
new
Array();
arrList[intIndex
++
]
=
"
1sdfsdf.com
"
;
arrList[intIndex
++
]
=
"
a11sdafs.net
"
;
arrList[intIndex
++
]
=
"
b22dsafsdf
"
;
arrList[intIndex
++
]
=
"
c333asdfsadf
"
;
arrList[intIndex
++
]
=
"
4444dsafasdf
"
;
arrList[intIndex
++
]
=
"
dddsfddsafdsaf
"
;
arrList[intIndex
++
]
=
"
121213dsafsdaf
"
;
arrList[intIndex
++
]
=
"
43213asdfadsf
"
;
arrList[intIndex
++
]
=
"
dsa3121dasf3
"
;
arrList[intIndex
++
]
=
"
a213
"
;
arrList[intIndex
++
]
=
"
323313
"
;
arrList[intIndex
++
]
=
"
3213
"
;
arrList[intIndex
++
]
=
"
32213
"
;
arrList[intIndex
++
]
=
"
dsfsdddd
"
;
arrList[intIndex
++
]
=
"
ds11dfsfd
"
;
arrList[intIndex
++
]
=
"
ffdafd
"
;
arrList[intIndex
++
]
=
"
afdfd
"
;
arrList[intIndex
++
]
=
"
afd
"
;
arrList[intIndex
++
]
=
"
baffad
"
;
arrList[intIndex
++
]
=
"
2fda2fd
"
;
arrList[intIndex
++
]
=
"
dasd
"
;
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.onblur
=
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();
selectedIndex
=-
1
;
objouter.innerHTML
=
""
;
for
(intTmp
=
0
;intTmp
<
arrList.length;intTmp
++
)
{
if
(arrList[intTmp].substr(
0
, strInput.length).toUpperCase()
==
strInput.toUpperCase())
{
addOption(arrList[intTmp]);
}
}
objouter.style.display
=
'';
}
else
{
objouter.style.display
=
'none';
}
function
addOption(value)
{
objouter.innerHTML
+=
"
<div onmouseover=\
"
this
.className
=
'sman_selectedStyle'\
"
onmouseout=\
"
this
.className
=
''\
"
onmousedown=\
"
document.getElementById('
"
+objInputId+
"
').value
=
'
"
+ value +
"
'\
"
>
"
+
value
+
"
</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
mendingLeft
=
ob .offsetLeft;
while
( ob
!=
null
&&
ob.offsetParent
!=
null
&&
ob.offsetParent.tagName
!=
"
BODY
"
)
{
mendingLeft
+=
ob .offsetParent.offsetLeft;
mendingOb
=
ob.offsetParent;
}
return
mendingLeft ;
}
function
getAbsoluteTop(ob)
{
var
mendingTop
=
ob.offsetTop;
while
( ob
!=
null
&&
ob.offsetParent
!=
null
&&
ob.offsetParent.tagName
!=
"
BODY
"
)
{
mendingTop
+=
ob .offsetParent.offsetTop;
ob
=
ob .offsetParent;
}
return
mendingTop ;
}
}
smanPromptList(arrList,
"
inputer
"
)
</
script
>
<
input type
=
"
text
"
id
=
"
inputer
"
>
会员力量,点亮园子希望
刷新页面
返回顶部
Powered by:
博客园
Copyright © 2024 cowboy
Powered by .NET 8.0 on Kubernetes