yyg1107
這家伙很懶,什么都沒(méi)有留下
posts(15)
comments(20)
trackbacks(0)
BlogJava
聯(lián)系
聚合
管理
公告
聯(lián)系方式:
常用鏈接
我的隨筆
我的評(píng)論
我的參與
最新評(píng)論
留言簿
給我留言
查看公開(kāi)留言
查看私人留言
隨筆分類
(11)
axis(1)
hibernate(1)
java(2)
js(2)
other(5)
隨筆檔案
(8)
2008年6月 (1)
2007年8月 (2)
2007年4月 (3)
2006年11月 (2)
文章分類
(37)
C++Builder(3)
eclipse(2)
html(4)
java(8)
jbpm(6)
JS(4)
other(4)
question handly!(4)
web容器(1)
workflow(1)
文章檔案
(36)
2007年4月 (2)
2007年3月 (1)
2007年1月 (2)
2006年12月 (2)
2006年11月 (3)
2006年10月 (11)
2006年9月 (2)
2006年7月 (2)
2006年6月 (1)
2006年5月 (1)
2006年4月 (6)
2006年3月 (3)
新聞檔案
(1)
2007年1月 (1)
收藏夾
(16)
好的BLOG(9)
收藏----blog(7)
JavaBlog
amigoxie
matrix
搜索
積分與排名
積分 - 32823
排名 - 1317
最新評(píng)論
1.?re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
werewrewrwer
--wrewrwe
2.?re: struts啟動(dòng)的一個(gè)錯(cuò)誤!
更名struts-config.xml, remove && add struts capability,重新生成一個(gè)config.xml。
--barryken
3.?p
42
--2
4.?re: hql語(yǔ)句----隨機(jī)查詢?nèi)☆^10條記錄[未登錄](méi)
沒(méi)意思,這不就是分頁(yè)的那一部分代碼嘛!
--啊啊
5.?re: 第一次做成功的AXIS例子[未登錄](méi)
樓主:能不能留下你的聯(lián)系方式!探討一下相關(guān)問(wèn)題...
--hehe
閱讀排行榜
1.?JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1(7298)
2.?第一次做成功的AXIS例子(2432)
3.?命令行創(chuàng)建ODBC數(shù)據(jù)源(1546)
4.?struts啟動(dòng)的一個(gè)錯(cuò)誤!(1266)
5.?hibernate調(diào)用存儲(chǔ)過(guò)程例子(1008)
評(píng)論排行榜
1.?JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1(7)
2.?第一次做成功的AXIS例子(5)
3.?struts啟動(dòng)的一個(gè)錯(cuò)誤!(4)
4.?轉(zhuǎn):如何在JAVA中使用日期 (0)
5.?命令行創(chuàng)建ODBC數(shù)據(jù)源(0)
View Post
JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
本來(lái)打算在網(wǎng)上找一個(gè)相關(guān)功能的代碼用用的,找到DOJO的代碼,本來(lái)打算把DOJO的類抽取出來(lái),只留下COMBOBOX輸入提示功能的,不過(guò)沒(méi)搞明白它的包加載機(jī)制,只好自己寫(xiě)了!
示例:
當(dāng)在文本框中打入"黑色、紅色、黃色、蘭色、綠色、灰色、蘭色、棕色、白色"中的一個(gè)詞的開(kāi)頭字的時(shí)候,會(huì)出現(xiàn)選擇框的提示功能。上下鍵選擇選擇框中的內(nèi)容,回車確定選取的內(nèi)容,并補(bǔ)全內(nèi)容到文本框中。
示例代碼如下:
<!
DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN"
>
<
HTML
>
<
HEAD
>
<
TITLE
>
?New?Document?
</
TITLE
>
<
META?
NAME
="Generator"
?CONTENT
="EditPlus"
>
<
META?
NAME
="Author"
?CONTENT
=""
>
<
META?
NAME
="Keywords"
?CONTENT
=""
>
<
META?
NAME
="Description"
?CONTENT
=""
>
<
SCRIPT?
LANGUAGE
="JavaScript"
>
<!--
var
?showFlag?
=
?
0
;
//
0.彈出提示框;1.取消彈出提示框
var
?textLength?
=
?
0
;
//
文本長(zhǎng)度
document.onkeydown?
=
?
function
?keyDown()
{
????
var
?keyCode?
=
?event.keyCode;
????
var
?oSelect?
=
?document.getElementById(
"
select1
"
);
????
var
?oDiv?
=
?document.getElementById(
"
divTip1
"
);
????
var
?oArea?
=
?document.getElementById(
"
area1
"
);
????
var
?sValue???
=
?oArea.value;
????
//
點(diǎn)擊鍵盤(pán)上下鍵,選擇框得到焦點(diǎn)
????
if
((keyCode
==
38
?
||
?keyCode
==
40
)?
&&
?oDiv.style.visibility?
==
?
"
visible
"
)
{
????????oSelect.focus();
????}
????
//
選擇框圖層顯示時(shí),點(diǎn)擊回車選擇第一個(gè)選項(xiàng)
????
if
(oDiv.style.visibility?
==
?
"
visible
"
?
&&
?keyCode
==
13
)
{
????????oSelect.focus();
????????oSelect.selectedIndex?
=
?
0
;
????????oArea.value
=
sValue.substring(
0
,sValue.length
-
1
)
+
oSelect.value;
????????hideTip(oDiv,oArea);
//
隱藏圖層select
????????
//
show1.innerHTML?=?oSelect.value;
????}
}
/**/
/*
選取值,添加到textarea
oArea???--?添加值的對(duì)象
oSelect?--?選擇值的對(duì)象
//var?oArea?=?document.getElementById("area1");
//var?oSelect?=?document.getElementById("select1");
*/
function
?selectedValue(oDiv,oArea?,oSelect)
{
????
var
?sValue???
=
?oArea.value;
????oArea.value
=
sValue.substring(
0
,sValue.length
-
1
)
+
oSelect.value;
????hideTip(oDiv,oArea);
//
隱藏圖層select
}
/**/
/*
顯示圖層select
oDiv??--?要顯示的圖層對(duì)象
oArea?--?要顯示的圖層位置的對(duì)象
//var?oDiv?=?document.getElementById("divTip1");
//var?oArea=document.getElementById("area1");
*/
function
?showTip(oDiv,oArea,oSelect)
{
????
if
(checkValue(oArea)?
&&
?showFlag?
==
?
0
)
{
????????oDiv.style.visibility?
=
?
"
visible
"
;
????????oSelect.focus();
????????
var
?t?
=
?oArea.offsetTop
+
event.srcElement.createTextRange().text.length;?
????????
var
?l?
=
?oArea.offsetLeft
+
event.srcElement.createTextRange().text.length;?
????????oDiv.style.left?
=
?l
*
2
+
10
;
????????oDiv.style.top??
=
?t
*
2
+
10
;
????}
else
{
????????hideTip(oDiv,oArea);
????}
}
/**/
/*
隱藏圖層select
oDiv??--?要隱藏的圖層對(duì)象
oFocus--?圖層隱藏后,要得到焦點(diǎn)的對(duì)象
*/
function
?hideTip(oDiv,oFocus)
{
????oDiv.style.visibility?
=
?
"
hidden
"
;
????oFocus.focus();
}
/**/
/*
匹配驗(yàn)證?
oArea?--?需要驗(yàn)證的內(nèi)容
*/
function
?checkValue(oArea)
{
????
var
?template?
=
?[
"
黑色
"
,
"
紅色
"
,
"
黃色
"
,
"
蘭色
"
,
"
綠色
"
,
"
灰色
"
,
"
蘭色
"
,
"
棕色
"
,
"
白色
"
]
????
var
?oSelect??
=
?document.getElementById(
"
select1
"
);
????
var
?lastSelectText?
=
?oArea.value.charAt(oArea.value.length
-
1
);
????
if
(oArea.value.length?
!=
?textLength)
{
????????textLength?
=
?oArea.value.length;
????????showFlag???
=
?
0
;
????}
????oSelect.length?
=
?
0
;
????
for
(
var
?i?
=
0
;i
<
template.length;i
++
)
{
????????
if
(template[i].indexOf(lastSelectText)
==
0
??
&&
?lastSelectText
!=
""
)
{
????????????
var
?option?
=
?
new
?Option(template[i],template[i]);
????????????
try
{
????????????????oSelect.add(option);
????????????}
catch
(e)
{}
????????}
????
????}
????
var
?iNewSize?
=
?oSelect.length;
????oSelect.size?
=
?iNewSize;
????
if
(iNewSize
==
0
)?
????????
return
?
false
;
????
else
????????
return
?
true
;
}
function
?cannelShowTip()
{
????showFlag?
=
?
1
;
}
//
-->
</
SCRIPT
>
</
HEAD
>
<
BODY
>
<
TEXTAREA?
id
="area1"
?NAME
="area1"
?ROWS
="20"
?COLS
="100"
?onkeyup
="showTip(divTip1,this,select1)"
?onClick
="showTip(divTip1,this,select1)"
?onFocus
="cannelShowTip()"
></
TEXTAREA
>
<
div?
id
="divTip1"
?style
="position:absolute;visibility:hidden;padding:5px"
>
<
select?
id
="select1"
?name
="select1"
?mulitple
="mulitple"
?size
="4"
?onclick
="selectedValue(divTip1,area1,this)"
?
>
<
option?
value
=1
>
1
</
option
>
<
option?
value
=11
>
11
</
option
>
<
option?
value
=2
>
2
</
option
>
<
option?
value
=3
>
3
</
option
>
</
select
>
</
div
>
<
INPUT?
TYPE
="button"
?NAME
=""
?onclick
=""
>
<
div?
id
=show1
></
div
>
<
div?
id
=show2
></
div
>
</
BODY
>
</
HTML
>
本來(lái)應(yīng)該是選擇提示框顯示在光標(biāo)顯示位置的,不過(guò)沒(méi)找到得到光標(biāo)顯示位置的相關(guān)代碼。
posted on 2006-11-22 14:02
young
閱讀(7298)
評(píng)論(7)
編輯
收藏
所屬分類:
js
View Comments
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評(píng)論
支持一下! 你可以看看這個(gè)教程.. 比較好的.
http://www.dynamicajax.com/fr/AJAX_Suggest_Tutorial-271_290_312.html
歡迎來(lái)我博客留言支持!
2006-11-22 14:42 |
BeanSoft
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評(píng)論
Javascript 也應(yīng)該面向?qū)ο笱絶 老大..........
2006-11-23 22:52 |
Web 2.0 技術(shù)資源
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評(píng)論
@Web 2.0 技術(shù)資源
本來(lái)是打算在網(wǎng)上找一段實(shí)現(xiàn)功能簡(jiǎn)單的代碼,自己再改改,可就是沒(méi)找到,只好自己啃書(shū)寫(xiě)一段了。
沒(méi)辦法,現(xiàn)在是項(xiàng)目急要功能,也管不了什么面向?qū)ο罅耍扔泄δ芎笥懈倪M(jìn)嘛!
2006-11-24 10:13 |
young
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評(píng)論
老大有錯(cuò)誤啊,怎么調(diào)試不出來(lái)啊,功能實(shí)現(xiàn)不了啊.
2007-09-23 11:22 |
肖飛
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評(píng)論
@肖飛
格式發(fā)布后做了轉(zhuǎn)換的,你可以自己再改改,問(wèn)題還是蠻多的。
http://www.aygfsteel.com/Files/yyg1107/輸入提示-層浮動(dòng)恒顯示.rar
2007-09-24 10:11 |
young
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評(píng)論
hao!
2008-01-25 11:22 |
name
#
re: JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
回復(fù)
更多評(píng)論
werewrewrwer
2012-02-09 22:30 |
wrewrwe
新用戶注冊(cè)
刷新評(píng)論列表
只有注冊(cè)用戶
登錄
后才能發(fā)表評(píng)論。
網(wǎng)站導(dǎo)航:
博客園
IT新聞
Chat2DB
C++博客
博問(wèn)
管理
相關(guān)文章:
沒(méi)有工具欄、菜單的頁(yè)面
JS實(shí)現(xiàn)文本框輸入提供選擇框的提示功能-1
Powered by:
BlogJava
Copyright © young
主站蜘蛛池模板:
平塘县
|
新余市
|
广水市
|
措美县
|
田林县
|
内黄县
|
蒲江县
|
江津市
|
乌恰县
|
无锡市
|
施秉县
|
荃湾区
|
杭州市
|
嘉兴市
|
富锦市
|
文安县
|
新民市
|
台南市
|
昌宁县
|
钟山县
|
慈溪市
|
疏附县
|
曲阜市
|
栖霞市
|
收藏
|
永登县
|
金门县
|
武清区
|
将乐县
|
博野县
|
利川市
|
墨江
|
安徽省
|
衡水市
|
永顺县
|
都兰县
|
宜川县
|
白河县
|
蒲城县
|
平利县
|
阿勒泰市
|