表单自动补全功能：

最新推荐文章于 2023-08-18 08:57:45 发布
最新推荐文章于 2023-08-18 08:57:45 发布
阅读量160 收藏
点赞数
原文链接：http://www.cnblogs.com/srxhmxx/p/5148517.html
版权
  1. bootstrap的bootstrap-typeahead.js
  2. jQuery的autocomplete.js
  3. js实现自动补全

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

<style> 

body { 

    margin-left: 0px; 

    margin-top: 0px; 

    margin-right: 0px; 

    margin-bottom: 0px; 

} 

 

.auto_hidden { 

    width: 204px; 

    border-top: 1px solid #333; 

    border-bottom: 1px solid #333; 

    border-left: 1px solid #333; 

    border-right: 1px solid #333; 

    position: absolute; 

    display: none; 

} 

 

.auto_show { 

    width: 204px; 

    border-top: 1px solid #333; 

    border-bottom: 1px solid #333; 

    border-left: 1px solid #333; 

    border-right: 1px solid #333; 

    position: absolute; 

    z-index: 9999; /* 设置对象的层叠顺序 */ 

    display: block; 

} 

 

.auto_onmouseover { 

    color: #ffffff; 

    background-color: highlight; 

    width: 100%; 

} 

 

.auto_onmouseout { 

    color: #000000; 

    width: 100%; 

    background-color: #ffffff; 

} 

</style>

</head>

<script language="javascript"> 

 

    var $ = function(id) { 

        return "string" == typeof id ? document.getElementById(id) : id; 

    } 

    var Bind = function(object, fun) { 

        return function() { 

            return fun.apply(object, arguments); 

        } 

    } 

    function AutoComplete(obj, autoObj, arr) { 

        this.obj = $(obj); //输入框 

        this.autoObj = $(autoObj);//DIV的根节点 

        this.value_arr = arr; //不要包含重复值 

        this.index = -1; //当前选中的DIV的索引 

        this.search_value = ""; //保存当前搜索的字符 

    } 

    AutoComplete.prototype = { 

        //初始化DIV的位置 

        init : function() { 

            this.autoObj.style.left = this.obj.offsetLeft + "px"; 

            this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight 

                    + "px"; 

            this.autoObj.style.width = this.obj.offsetWidth - 2 + "px";//减去边框的长度2px   

        }, 

        //删除自动完成需要的所有DIV 

        deleteDIV : function() { 

            while (this.autoObj.hasChildNodes()) { 

                this.autoObj.removeChild(this.autoObj.firstChild); 

            } 

            this.autoObj.className = "auto_hidden"; 

        }, 

        //设置值 

        setValue : function(_this) { 

            return function() { 

                _this.obj.value = this.seq; 

                _this.autoObj.className = "auto_hidden"; 

            } 

        }, 

        //模拟鼠标移动至DIV时，DIV高亮 

        autoOnmouseover : function(_this, _div_index) { 

            return function() { 

                _this.index = _div_index; 

                var length = _this.autoObj.children.length; 

                for ( var j = 0; j < length; j++) { 

                    if (j != _this.index) { 

                        _this.autoObj.childNodes[j].className = 'auto_onmouseout'; 

                    } else { 

                        _this.autoObj.childNodes[j].className = 'auto_onmouseover'; 

                    } 

                } 

            } 

        }, 

        //更改classname 

        changeClassname : function(length) { 

            for ( var i = 0; i < length; i++) { 

                if (i != this.index) { 

                    this.autoObj.childNodes[i].className = 'auto_onmouseout'; 

                } else { 

                    this.autoObj.childNodes[i].className = 'auto_onmouseover'; 

                    this.obj.value = this.autoObj.childNodes[i].seq; 

                } 

            } 

        }, 

        //响应键盘 

        pressKey : function(event) { 

            var length = this.autoObj.children.length; 

            //光标键"↓" 

            if (event.keyCode == 40) { 

                ++this.index; 

                if (this.index > length) { 

                    this.index = 0; 

                } else if (this.index == length) { 

                    this.obj.value = this.search_value; 

                } 

                this.changeClassname(length); 

            } 

            //光标键"↑" 

            else if (event.keyCode == 38) { 

                this.index--; 

                if (this.index < -1) { 

                    this.index = length - 1; 

                } else if (this.index == -1) { 

                    this.obj.value = this.search_value; 

                } 

                this.changeClassname(length); 

            } 

            //回车键 

            else if (event.keyCode == 13) { 

                this.autoObj.className = "auto_hidden"; 

                this.index = -1; 

            } else { 

                this.index = -1; 

            } 

        }, 

        //程序入口 

        start : function(event) { 

            if (event.keyCode != 13 && event.keyCode != 38 

                    && event.keyCode != 40) { 

                this.init(); 

                this.deleteDIV(); 

                this.search_value = this.obj.value; 

                var valueArr = this.value_arr; 

                valueArr.sort(); 

                if (this.obj.value.replace(/(^\s*)|(\s*$)/g, '') == "") { 

                    return; 

                }//值为空，退出 

                try { 

                    var reg = new RegExp("(" + this.obj.value + ")", "i"); 

                } catch (e) { 

                    return; 

                } 

                var div_index = 0;//记录创建的DIV的索引 

                for ( var i = 0; i < valueArr.length; i++) { 

                    if (reg.test(valueArr[i])) { 

                        var div = document.createElement("div"); 

                        div.className = "auto_onmouseout"; 

                        div.seq = valueArr[i]; 

                        div.onclick = this.setValue(this); 

                        div.onmouseover = this.autoOnmouseover(this, div_index); 

                        div.innerHTML = valueArr[i].replace(reg, 

                                "<strong>$1</strong>");//搜索到的字符粗体显示 

                        this.autoObj.appendChild(div); 

                        this.autoObj.className = "auto_show"; 

                        div_index++; 

                    } 

                } 

            } 

            this.pressKey(event); 

            window.onresize = Bind(this, function() { 

                this.init(); 

            }); 

        } 

    } 

//--> 

</SCRIPT> 

<body> 

    <h1 align="center">自动完成函数(Autocomplete Function)</h1> 

    <div align="center"> 

        <input type="text" 

            style="width: 300px; height: 20px; font-size: 14pt;" id="o" 

            οnkeyup="autoComplete.start(event)"> 

    </div> 

    <div class="auto_hidden" id="auto"> 

        <!--自动完成 DIV--> 

    </div> 

    <script> 

        var autoComplete = new AutoComplete('o', 'auto', [ 'b0', 'b12', 'b22', 

                'b3', 'b4', 'b5', 'b6', 'b7', 'b8', 'b2', 'abd', 'ab', 'acd', 

                'accd', 'b1', 'cd', 'ccd', 'cbcv', 'cxf' ]); 

    </SCRIPT> 

</body> 

</html> 

 

参考网址：http://blog.csdn.net/malinjie66/article/details/9281443

转载于:https://www.cnblogs.com/srxhmxx/p/5148517.html

Mr.Gu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 jQuery 表单输入自动完成 autocomplete-suggestions插件.rar
07-10
html5-autocomplete-suggestions插件实例包，是一个由HTML5与jQuery共同实现的表单输入自动完成的例子，当用户输入的时候，随着字符的输入，会自动匹配输入结果，以下拉的方式显示出匹配项，与百度搜索框的下拉提示十分相似，这一款由HTML5技术实现，可方便移植到移动设备客户端使用，移动开发、pc前端设计都可以借鉴。
更强的自动补全提示：提示补全组件：Kissy Suggest（转）
07-30
在IT行业中，自动补全功能已经成为了开发人员和用户日常工作中不可或缺的一部分，它极大地提高了代码编写和信息搜索的效率。本文将重点介绍一种强大的自动补全提示组件——Kissy Suggest，它是一个基于JavaScript的...
表单自动完成
weixin_33709590的博客
11-12 143
public function rest() { $q = $this-&gt;request-&gt;get('q'); $dicts = Db::name($this-&gt;table)-&gt;where('dvalue','like','%'.$q.'%')-&gt;field('dvalue')-&gt;select(); ...
两种表单自动补全
Fhang
08-24 933
效果图： 第一种：从数据库中检索之后补全 第二种：邮箱等纯前端的补全 先说第二种，使用开源的插件，所以相对简单。 github上面的项目 completer。 https://github.com/fengyuanchen/completer 做法特别容易，github上面有详细的文档。一开始尝试用这个来配上自己的后台代码，做成第一种的自动补全，搞了半天失败了。可能本人js太差，改动太多的话，
jquery 表单自动补全
jxs_king的博客
01-04 117
http://www.open-open.com/ajax/AutoComplete.htm
PHP自动补全表单的两种方法
12-19
当收到响应后，将返回的字符串分割成数组，并使用自定义的AutoComplete.js库初始化自动补全功能。用户输入时，AutoComplete.js会显示匹配的建议列表。 第二种方法主要依赖前端插件，这里使用的开源插件是GitHub上的...
js自动补全功能
06-12
JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在前端开发中起着核心作用。...通过结合这些知识点，你可以创建一个高效、用户友好的自动补全功能，提升网站或应用的用户体验。
PHP+jQuery实现自动补全功能
12-19
在网页开发中，为用户提供便捷的自动补全功能是一种常见的需求，它能够提高用户的交互体验。本篇将详细讲解如何使用PHP和jQuery的select2插件来实现这一功能。 首先，我们要了解select2插件。Select2是一款强大的...
自动补全功能
07-30
自动补全功能在开发工具中尤为重要，例如IDE（集成开发环境）如IntelliJ IDEA、Visual Studio Code等，它们的智能提示功能可以为程序员提供类名、函数名、API等建议。此外，在命令行工具如bash中，`tab`键的补全功能...
应用程序开发总结(9)--表单自动完成
htsitr2的专栏
09-03 770
第11章 表单自动完成
html5自动完成是什么,HTML5中form如何关闭自动完成功能
weixin_36269334的博客
05-30 628
什么是HTML5的form自动完成功能？首先，HTML5 中有个新属性autocomplete ，autocomplete 属性规定表单是否应该启用自动完成功能，它自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。如：Firstname:Lastname:E-mail:请填写并提交此表单，然后重载页面，来查看自动完成功能是如...
2021-01-03 【Web作业开发记录】表单的自动补全功能
Sakura的博客
01-03 161
【Web作业开发记录】表单的自动补全功能 1.需求分析 对于一个搜索商品的模块，输入一个字符后，提示可以用于自动补全的提示。 2.设计 使用HTML5提供的datalist标签可以很快的解决这个问题。具体的流程框架如下图所示。 #mermaid-svg-E9mZSRXuSUnzbQQD .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#m
Vue中如何进行表单自动完成与下拉选择器
程序员徐师兄的博客
06-14 1327
如果默认的Vue-Autocomplete样式不能满足你的需求，你可以自定义样式。这里我们引入了Vue-Autocomplete的默认样式和自定义样式文件，你可以根据自己的需求来修改样式文件名和文件路径。在这个例子中，我们使用了CSS选择器来定制样式，以实现自定义风格。如果默认的Vue-Select样式不能满足你的需求，你可以自定义样式。这里我们引入了Vue-Select的默认样式和自定义样式文件，你可以根据自己的需求来修改样式文件名和文件路径。
html5自动完成是什么,HTML5的form如何关闭自动完成功能
weixin_36003005的博客
05-30 143
HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。关闭输入框的自动完成功能有3种方法：1、在IE的Interne...
html5自动完成是什么,HTML5中form如何关闭自动完成功能的方法
weixin_28695161的博客
05-30 441
什么是HTML5的form自动完成功能？首先，HTML5 中有个新属性autocomplete ，autocomplete 属性规定表单是否应该启用自动完成功能，它自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。如：First name:Last name: E-mail: 请填写并提交此表单，然后重载页面，来查看自动完成功能是如...
怎么清除IE浏览器中表单的自动提示?
weixin_34290631的博客
12-19 547
在IE给我们提供的很多功能中，有一个比较贴心，但又让人烦恼的Auto Completion功能。就是我们在IE的任何表单中输入并提交过的内容，会被IE自动记录下来，然后在下次用户输入这个keyword时，IE会逐字提示我们自动完成它，就像VS.NET的IntelliSense一样。 如果我们在IE的Internet Options->Con...
Ant Design Vue表单自动填充账号密码问题
陈新科的博客
10-27 3402
问题： 打开表单账号密码会自动填充 原因： 现代浏览器实现了内建的密码管理功能：当用户在一个网站上输入了用户名和密码，浏览器会为用户提供记忆功能。当用户再次访问这个网站时，浏览器使用保存的值自动填写登录字段。 解决方案： <a-input type="password" v-model:value="formState.password" autocomplete="new-password" /> 我是在密码框加入了autocomplete="new-password"，.
HTML5中form如何关闭自动完成功能
最新发布
delishcomcn的博客
08-18 208
请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p><p>请注意，表单的自动完成功能是打开的，而 e-mail 域是关闭的。
前端vue实现表单自动补全
07-28
前端Vue可以通过设置`autocomplete`属性来实现表单的自动补全功能。根据WCAG 2.1的规则，如果你的网站需要遵守WCAG标准，建议使用自动填充和自动补全功能。在Vue中，你可以在表单的`input`元素上添加`autocomplete`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值