页面版文本框智能提示JSCode

最新推荐文章于 2022-04-22 10:54:57 发布
最新推荐文章于 2022-04-22 10:54:57 发布
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript/HTML/CSS 文章标签： autocomplete function div server input javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rock870210/article/details/4842986
版权

  首先说下背景，该code用于一个多条件查询界面，原本该查询条件由一个下拉列表提供，但是由于下拉列表数据量过大，用户使用不方便，便希望在页面给出一个智能提示的功能，但搜索的数据来自下拉列表，于是这code便诞生了，如下：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" language="javascript">
        var currentIndex=-1;//保存提示框中选择的索引
        var sumSearchCount=0;//保存提示框中数据数量
        var tempValue="";//保存当前输入的要搜索的内容
        var objTxt="";//保存文本框对象
        var top=0;//提示框的top
        var left=0;//提示框的left
        var width=0;//提示框的width
        var values = new Array();//保存下拉列表的值
        var texts = new Array();//保存下拉列表的显示内容
        var tempDiv=new Array();//保存提示框中索引对应的values索引
       
        //获取下拉列表的值和显示内容
        function getSelectValues(ddl){
            ddlvalue = document.getElementById("DropDownList1");
            for(var i=0;i<ddlvalue.length;i++){
                values[i]=ddlvalue.options[i].value;
                texts[i]=ddlvalue.options[i].text;
            }
        }
       
        var oInterval = "";//保存自动计时对象
        function fnStartInterval(txt_id){
            getSelectValues("DropDownList1");
            objTxt=txt_id;//获取输入文本框对象
            top = getLength("offsetTop")+objTxt.offsetHeight;
            left= getLength("offsetLeft");
            width=objTxt.offsetWidth;
            oInterval = window.setInterval("beginSearch()",2000);//启用计时
        }
       
        //获取对应属性的长度
        function getLength(attribute)
        {
            var offset = 0;
            var txt_input = document.getElementById("txtSearch");
            while (item)
            {
                offset += txt_input[attribute];
                txt_input = txt_input.offsetParent;
            }
            return offset;
        }
       
        //停止计时
        function fnStopInterval()
        {
            window.clearInterval(oInterval);
        }
       
        //自动完成提示
        function beginSearch(){
            if(objTxt.value.length>0 && tempValue!=objTxt.value)
            {
                sumSearchCount=0;
                tempValue=objTxt.value;
                var div_show = document.getElementById("divMsg");
                div_show.style.top=top+"px";
                div_show.style.display="block";
                div_show.style.left=left+"px";
                div_show.style.width=width+"px";
                div_show.innerHTML="";
                var leng = texts.length;
                var txt_value = objTxt.value;
                var row="";
                for(var i=0;i<leng;i++){
                    if(texts[i].indexOf(txt_value)!=-1){                       
                        row = row + "<div style=/"font-size:14px; display:block;  width:100%/" id='divsearch_"+i+"' οnmοuseοver=/"this.style.backgroundColor='#3366CC';currentIndex="+i+";/" οnmοuseοut=/"this.style.backgroundColor='';currentIndex=-1;/" οnclick=/"span_click(this)/" >"+texts[i]+"</div>";                                          
                        tempDiv[sumSearchCount]=i;
                        sumSearchCount++;
                    }                   
                }
                div_show.innerHTML=row;
            }
            else if(objTxt.value.length==0 || objTxt.value == null)
            {
                var div_msg = document.getElementById("divMsg");
                div_msg.style.display="none";
                div_msg.innerHTML="";
            }
        }
       
        //提示内容单击保存到文本框中
        function span_click(sp)
        {           
            clear();
            objTxt.value=sp.innerHTML;
            document.getElementById("DropDownList1").options[sp.id.substring(sp.id.indexOf('_')+1,sp.id.length)].selected="selected";           
        }
       
        //停止查询，关闭提示
        function closeSearch()
        {
            var tbl = document.activeElement.parentElement;
            if(tbl && tbl.id!="divMsg")//防止使用上下键后丢失提示内容
            {
                clear();
                document.getElementById("divMsg").innerHTML="";
            }
            else if(currentIndex==-1)
            {
                clear();
                document.getElementById("divMsg").innerHTML="";
            }
        }
       
        //清空提示
        function clear()
        {
            fnStopInterval();
            currentIndex=-1;
            tempValue="";
            document.getElementById("divMsg").style.display="none";
        }
       
        //使用键盘上下方向键和enter键
        function changeSelect()
        {
            var divContent = document.getElementById("divMsg");
            if(divContent && divContent.style.display=="block")
            {
                if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
                {
                   
                    if(currentIndex!=-1) document.getElementById("divsearch_"+tempDiv[currentIndex]).style.backgroundColor="";
                    if (event.keyCode == 38 && currentIndex > 0)
                    {
                         currentIndex--;
                         document.getElementById("divsearch_"+tempDiv[currentIndex]).style.backgroundColor="#3366CC";
                    }
                    else if (event.keyCode == 40 && currentIndex < sumSearchCount-1)
                    {
                         currentIndex++;
                         document.getElementById("divsearch_"+tempDiv[currentIndex]).style.backgroundColor="#3366CC";
                    }
                    else if (event.keyCode == 13)
                    {                       
                        if(currentIndex > -1)
                        {                    
                            var divpart = document.getElementById("divsearch_"+tempDiv[currentIndex]);   
                            objTxt.value=divpart.innerHTML;                      
                            document.getElementById("DropDownList1").options[tempDiv[currentIndex]].selected="selected";
                            clear();
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="txtSearch" autocomplete="off" οnkeydοwn="changeSelect()" οnfοcus="fnStartInterval(this)" οnblur="closeSearch()" runat="server" />
        <asp:DropDownList ID="DropDownList1" runat="server" DataTextField="slr_realname" DataValueField="systemloginrecord_id" DataSourceID="ObjectDataSource1" Width="130px">
        </asp:DropDownList><asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetRecordDS"
            TypeName="TestDAL"></asp:ObjectDataSource>
    </div>
    <div style="display:none; z-index:2; text-align:left; position:absolute; border:solid 1px;" id="divMsg">
       
    </div>
    </form>
</body>

</html>

 <input type="text" id="txtSearch" autocomplete="off"。。。这里加入了autocomplete属性，屏蔽了文本框输入记录提示功能，虽然这个功能很好，但是在这里却成了绊脚石。呵呵

以前没有写博客的习惯，好多不经常使用的东西用过就忘了。以后是要整理整理了。

Rock870210
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
输入文本框的JS代码
weixin_40945354的博客
02-14 1379
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 示例</title> </head> <body> <div id="app"> <input type="text" v-model="name" placeholder="你的名字">
enter对应的keycode_javaScript keyCode对应表 ,以供查询
weixin_39844481的博客
12-30 397
keycode 8 = BackSpace BackSpacekeycode 9 = Tab Tabkeycode 12 = Clearkeycode 13 = Enterkeycode 16 = Shift_Lkeycode 17 = Control_Lkeycode 18 = Alt_Lkeycode 19 = Pausekeycode 20 = Cap...
文本框，智能提示信息
liuyahaowei的专栏
07-21 597
1 样式           .fm {             clear: both;             position: relative;             z-index: 297;         }         .bdsug {             position: absolute;             width: 265px;
PHP jQuery json搜索框智能标签提示实例
08-13
PHP jQuery json搜索框输入提示特效，运用了JSON技术实现的ajax搜索提示。 免积分下载：http://www.srcfans.com/code/12100.shtml 当用户在搜索框输入内容时，可显示出可能的内容列表，会智能匹配搜索项，用户可通过鼠标选择这些匹配项，免去用户操作的麻烦。另外本效果也可用户标签输入提示效果，匹配项会智能填充背景，并添加删除功能，在一些大网站，经常见到这种效果，希望本源码会对你有所帮助。
jquery实现input输入框输入值自动智能提示的实现
笑*容的博客
12-08 1万+
在web开发中，经常会做搜索功能，想要实现类似百度搜索那种，输入汉字后立马提示相关信息搜索，本文提供两种思路： 第一种：使用第三方js，只需要一行代码，不过搜索数据库信息比较多可能收费，网址：http://92find.com/ 第二种：提供大概思路和代码。  首先，肯定是要从数据库或者js自己定义要加载的内容，保存到schoolList中，可以从数据库中获取到数据然后放到js里
asp.net 页面版文本框智能提示JSCode (升级版)
10-29
模拟百度，Google智能提示，非与服务器端交互的，数据源来自已经绑定好的下拉列表。纯客户端脚本 升级版
jscode.zip
最新发布
01-05
【标题】"jscode.zip" 暗示这是一个包含JavaScript代码的压缩文件，可能是某个项目、教程或示例集合。JavaScript是一种广泛使用的编程语言，主要应用于网页和网络应用的前端开发，但也可以在服务器端（如Node.js）...
JSCode-开源
05-14
JSCode是程序的简单XML表示。 JSCode项目提供了用于在JSCode中构建程序的工具。 工具将代码显示为块。 您可以将程序输出为Java或C或Mindscript，用于Lego RCX机器人等。
jscode:Javascript代码
07-01
在给定的“jscode: Javascript代码”中，我们看到提到了一个功能调试对象，这通常是为了帮助开发者更好地理解和优化他们的JavaScript代码。下面我们将深入探讨JavaScript的基本概念、调试技巧以及与`_debug_object`...
js文本框输入内容智能提示效果
11-23
本文实例讲述了js文本框输入内容智能提示效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 大体思路： 1.监听文本框事件。这里是用的keyup事件。大家可以尝试用onchange事件。不过感觉keyup事件的效果要好一点。 2.根据输入内容通过ajax异步的方式去访问后台数据。 3.遍历返回数据将数据添加到显示区域。 4.在添加数据的同时给每一条数据加上一些效果，点击其中一条将数据填到文本框，并且提示内容消失。 5.后台数据应该拼接成json格式。 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
文本框提示气泡
10-09
文本框气泡、里面有demo大家下载可以看到。
文本框输入时 实现自动提示（像百度、google一样）
09-05
本框输入时 实现自动提示（像百度、google一样）,需要的朋友可以参考下
input文本框输入框智能文字提示
qq_26673953的博客
02-26 1252
html5属性 试试就知道很智能
HTML-input文本框（添加提示文字，填写内容时消失）
热门推荐
Bule_daze的博客
01-26 11万+
input文本框内添加提示文字，填写内容时消失： 用placeholder属性作为提示语 <input placeholder="提示语..."></input>
vs code代码自动提示不见了——一个勾解决
surymy
04-22 1万+
今上午打开vs code，写代码就是不得劲，智能提示出不来了，解决方案： 打开设置，搜索：@tag:usesOnlineServices 按步骤勾上TypeScript里边的小方框即可 结果展示：
请问这个java源文件实现的是什么功能
qq_41976482的博客
05-15 618
package util; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; ...
打印之前对字体大小调整的处理
Rock870210的专栏
01-14 4315
<!-- //元素设定文字大小的在原来基础上增加size1的大小，未设定的指定为size2的大小 function changefontsize(divName,size1,size2)//size1增加大小，size2未设定时默认大小 { var artibody = document.getElementById(divName);
关于IFrame跳出框架的设置
Rock870210的专栏
08-10 2277
iframe 跳转 退出系统 target="_top"  Session失效，跳转到登陆界面
vue小程序微信登录jscode获取
06-08
要在 Vue 小程序中实现微信登录并获取 jscode，可以使用小程序官方提供的 wx.login() 方法。以下是示例代码： ```javascript // 在需要登录的页面或组件中引入 wx 对象 import wx from 'weixin-js-sdk' // 调用 wx.login() 方法获取 jscode wx.login({ success: res => { const { code } = res console.log('jscode:', code) // 将 jscode 发送给后端进行登录验证等操作 } }) ``` 注意，wx.login() 方法需要在小程序的 app.json 文件中配置相应的权限：scope.userInfo 和 scope.userLocation。同时，需要在小程序后台配置好登录的服务器域名和合法域名。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值