`

input框提示js,类似GOOGLE,可以做成动态的

阅读更多
<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> 
分享到:
评论

相关推荐

    input框中出现提示文字(兼容ie 火狐 谷歌)

    附件中的"input框中出现提示文字(兼容ie 火狐 谷歌)"可能包含了一个JavaScript或者jQuery的解决方案,旨在为旧版IE、火狐和谷歌浏览器提供一致的提示文字功能。 在IE8及以下版本,我们可以使用传统的JavaScript...

    js-input输入框提示语

    综上所述,`js-input输入框提示语`是前端开发中的基本需求,通过HTML的`placeholder`属性结合JavaScript的动态操作,可以实现丰富的提示语功能,提高用户交互体验。在实际开发中,还需要考虑到兼容性和用户体验,...

    vue 校验多个input框右侧提示

    VueValidate是一个专门为Vue设计的表单验证插件,它允许开发者轻松地实现对多个input框的同步校验,并在输入框右侧实时显示提示信息。 在Vue中,我们通常会为每个input绑定一个v-model指令,用来同步用户的输入数据...

    原生js简易提示框 input 点击文字消失

    如果提示信息需要根据用户操作或数据变化,可以使用JavaScript来动态修改提示框的内容。例如,将提示信息设为变量,然后在需要时更新它: ```javascript var tipMessage = '提示信息'; // 更新提示信息 tipBox...

    防止input框输入的javascript代码

    可以有效的阻止在hutml文档的input框中输入内容,纯手写,经检测可以顺利运行

    js 特效 html 特效 input框的隐藏显示

    js 特效 html 特效 input框的隐藏显示

    java中js代码删除input框

    标题“java中js代码删除input框”表明我们要讨论的是如何使用JavaScript来删除一个HTML中的input元素。在描述中提到,当用户点击“删除”按钮时,会触发一个JavaScript方法,这个方法将负责删除指定的input框。 ...

    js实现可下拉可输入input select框

    js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项

    js 特效 html 特效 Input框中的滚动信息

    js 特效 html 特效 Input框中的滚动信息

    input框下拉提醒js

    这种功能通常被应用于搜索框、表单筛选等场景,当用户在输入框内输入文字时,系统会根据输入内容动态展示一个下拉列表,提供匹配的建议选项供用户选择。这种技术在现代网页和应用开发中非常普遍,能够极大地提升用户...

    js实现input输入框输入信息后出现下拉选择框

    js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取

    javascript经典特效---Input框中的滚动信息.rar

    标题中的“javascript经典特效---Input框中的滚动信息”指的是在JavaScript编程中实现的一种特定的用户界面效果,即在输入框(Input)内显示滚动信息。这种特效常见于各种Web应用中,例如实时提示、错误信息显示或者...

    input框添加图片按钮

    本文将详细介绍如何在`input`框中添加图片按钮,并确保该设计能够兼容主流浏览器如火狐、谷歌以及IE。 #### 实现原理 实现这一功能的关键在于CSS定位技术与JavaScript的动态样式调整。通过设置不同的CSS样式属性...

    javascript经典特效---input框的增加.rar

    在这个案例中,我们将深入理解如何利用JavaScript来增强用户在input框中的输入体验,比如实时验证、动态添加新的input字段等。 在描述中,“input框的增加.rar”进一步强调了这个压缩包内容的重点是关于input框数量...

    js 特效 html 特效 缩小的input框

    js 特效 html 特效 缩小的input框 js 特效 html 特效 缩小的input框

    javascript经典特效---input框的隐藏显示.rar

    在JavaScript编程领域中,"input框的隐藏显示"是一个常见的需求,特别是在网页交互设计中。Input框,也就是HTML中的`&lt;input&gt;`元素,是用户输入数据的基本组件。本教程将深入探讨如何通过JavaScript来控制input框的...

    Input框后面的“X”实现清除文本框插件

    IE11 在Input框内添加一个“X”,用来点击清除用户输入的数据,个人觉挺好用的,但是其它浏览器不会出现, 特进行插件扩展,实现所有浏览器都能出现“X” 实现原理: 此插件通过查找所有Input框 type="text" 属性 ...

    input类似百度谷歌检索功能js加css数据后台ajax调用

    标题中的“input类似百度谷歌检索功能js加css数据后台ajax调用”指的是在网页中实现一个搜索框(input元素)的功能,它模仿了百度和谷歌搜索引擎的实时检索特性。这个功能通常结合JavaScript(js)、CSS(css)以及...

    input框自动添加后缀

    这是我从自己项目中抽取出来的十分简单的小代码,为input框自动添加后缀,希望大家一起交流

    js提示框制作js文字提示框,js图片提示框

    为了更方便地创建提示框,还可以借助现有的JavaScript库或框架,如jQuery UI、Bootstrap的Modal组件等。这些库提供了丰富的功能和易于使用的API,可以快速构建出美观且功能强大的提示框。 总结来说,JavaScript ...

Global site tag (gtag.js) - Google Analytics