<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 test() {
init();
smanPromptList(arrList,"aspx")
smanPromptList(arrList,"aspx2")
smanPromptList(arrList,"inputer")
}
function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
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;
}
);
}
function smanPromptList(arrList,objInputId){
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;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' 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 ;
}
</script>
<body onload="test()">
</body>
请输入内容:
<input type="text" id="inputer"> 如 a
<br>
<font color="red">
改来改去还是只能用于一个文本框的下拉提示
</font>
如果是两个的话就不能出来提示了呀。。。<br>
<input type="text" id="aspx"><br>
<input type="text" id="aspx2"><br>
多个文本框的下拉提示 还是没实现,
我的JS不好还请大家帮帮看看。我想
<font color="red" >
实现多个文本框都能下拉提示 怎么办啊。。。<br>
</font>
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 test() {
init();
smanPromptList(arrList,"aspx")
smanPromptList(arrList,"aspx2")
smanPromptList(arrList,"inputer")
}
function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
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;
}
);
}
function smanPromptList(arrList,objInputId){
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;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' 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 ;
}
</script>
<body onload="test()">
</body>
请输入内容:
<input type="text" id="inputer"> 如 a
<br>
<font color="red">
改来改去还是只能用于一个文本框的下拉提示
</font>
如果是两个的话就不能出来提示了呀。。。<br>
<input type="text" id="aspx"><br>
<input type="text" id="aspx2"><br>
多个文本框的下拉提示 还是没实现,
我的JS不好还请大家帮帮看看。我想
<font color="red" >
实现多个文本框都能下拉提示 怎么办啊。。。<br>
</font>
发表评论
-
db2, oracle和sqlserver取前几行的语法
2010-10-18 11:58 987db2: select * from tab f ... -
项目总结(Ajax+Struts+Spring+Hiberante+SQLServer2000) 第一部分 (转载)
2008-03-29 16:49 688总算将一个项目勉强上线,也是第一次我独立完成的这么多任务,框架 ... -
实例学习Spring和Hibernate的一点点体会 (转载)
2008-03-29 17:36 798昨天用Spring写DAO,有朋友说比较Hibernate还是 ... -
jsp+xsl查询数据库
2008-04-06 19:26 1056往往JSP通常用来动态的生成HTML文件,来 ... -
hibernate3.0中文查询问题解决方法
2008-04-07 13:08 753在applicationContext.xml中加入如下代码: ... -
简单的JSTL应用(入门)
2008-04-07 19:51 1039需要的包及TLD文件: 首先需要将用到的jar包放入WEB-I ... -
EL表达式语言
2008-04-09 00:30 706引用:http://blog.163.com/s_zhchlu ... -
使用COOKIE登录验证(转载)
2008-04-21 20:11 1524附加功能:登录成功后 ... -
JavaMail
2008-04-30 13:19 663package org.hank.mail;import ... -
用"window.showModalDialog()"实现DIV模式弹出窗口 (转)
2008-05-04 09:20 18031、test.html 测试页 <html> ... -
以二进制流的方式存取图像
2008-05-07 00:03 1268imageinfo.sql CREATE TABLE ... -
java 生成图片缩略图
2008-05-08 13:26 7188方法一: import javax.imageio.Image ... -
一个不错的弹出窗口的js效果(值的收藏)
2008-06-02 19:00 1131<script type="text/jav ... -
<c:forEach>&条件标签使用
2008-06-06 09:57 7115<c:forEach>标签的使 ... -
div 缓慢下拉效果
2008-06-10 18:05 1530<!DOCTYPE html PUBLIC " ... -
弹出窗口传值
2008-06-13 09:07 929子窗口中内容: function change(obj){ ... -
Action之间传值
2008-06-13 09:13 878return new ActionForward(" ... -
数据库连接池简介
2008-06-15 14:30 766数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应 ... -
Spring的事务管理
2008-06-15 14:32 461Spring提供了一致的事务管理抽象。这个抽象是Sprin ... -
form产生的空行的解决
2008-06-16 16:32 711利用css属性,将form的内部上下左右的填充距离设置为0就好 ...
相关推荐
React Native提供的组件可以访问原生UI组件和业务逻辑,通过JS-Native桥接和插件(Polyfills)来弥补原生API的不足。 文档还提到了React Native一些核心组件和APIs,例如: - ListView:用于展示可滚动列表。 - ...
如果要包含一个数组,可以这样做: ```java JSONArray arrayValue = new JSONArray(); arrayValue.set(0, new JSONString("array item 0")); arrayValue.set(1, new JSONString("array item 1")); arrayValue.set(2,...
Bootstrap是一个流行的前端开发框架,它提供了丰富的预定义样式、组件和JavaScript插件,可以帮助开发者快速构建响应式和移动设备优先的网页。 描述中提到"用BootStrap美化的简单登陆页面",意味着我们将关注如何...
3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言 超文本 :也是...
JSON,即JavaScript Object Notation,是一种轻量级的数据交换格式,因其简洁和高效而被广泛使用。它允许数据以键值对(Name-Value 对)和数组(Value 的有序列表)的形式进行组织,使得人类可读且易于机器处理。与...
AngularJS是一种开源的JavaScript框架,由Google维护,主要用于简化动态网页应用的开发过程。它通过扩展HTML的语法来提供更加灵活的数据绑定机制和控制结构,使得开发者能够构建出既高效又易于维护的Web应用程序。 ...
AngularJS是一个JavaScript框架,由Google团队开发,用于创建动态网页应用。它允许开发者使用HTML作为模板语言,并通过扩展HTML的语法来表达应用的组件清晰和简洁。AngularJS的一个核心特性是数据绑定,这意味着用户...
在这种情况下,最合适的控件是组合框或列表框(D选项),因为它们允许用户从预定义的选项中选择一项,同时也可以支持自由输入数据的功能。 #### 12. 软件工程的要素 - **知识点解析**:软件工程的三个主要要素是...
例如,如果我们需要获取页面中所有`input`标签并找到类型为`button`的元素,可以这样做: ```javascript var inputObjs = document.getElementsByTagName('input'); console.info(Array.from(inputObjs)); ``` `...