由于项目需要,在输入框中要做一些输入限制的同时,更加要求用户体验,提供一些自动完成设置。所以有需求,总会有解决方式,下面说一下自动完成插件的原理:

html的body部分:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div di="main" style="background:url(2banner.jpg);">

	<div class="demo">
<p>1、输入邮箱号:</p>
<input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail">
<p> </p>
<p>2、输入时间:</p>
<input type="text" id="auto-complete-time" class="form-control">
<p> </p>
<p>3、输入域名:</p>
<div class="input-group">
<span class="input-group-addon">www.</span>
<input id="auto-complete-domain" class="form-control" type="text" placeholder="请输入域名" autocomplete="off" style="z-index:0"> <span class="input-group-btn"><a id="auto-complete-go" class="btn btn-default" href="javascript:void(0);">Go!</a></span>
</div> </div> </div></span>

html中的JavaScript方法(自动完成功能块)

<span style="font-family:KaiTi_GB2312;font-size:18px;">$(function(){
$("#auto-complete-email").completer({
separator: "@",
source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"]
});
$("#auto-complete-time").completer({
filter: function(val) {
val = val.replace(/\D/g, "").substr(0, 2); if (val) {
val = parseInt(val, 10) || 0;
val = val > 23 ? 23 : val < 10 ? "0" + val : val;
} return val;
},
separator: ":",
source: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]
}); var $autoCompleteDomain = $("#auto-complete-domain"),
$autoCompleteGo = $("#auto-complete-go"); $autoCompleteDomain.completer({
complete: function() {
var url = "http://www." + $autoCompleteDomain.val(); $autoCompleteGo.attr("href", url);
}, separator: ".",
source: ["com", "net", "org", "co", "io", "me", "cn", "com.cn"]
}); });</span>

效果图:

参数分析:

感谢您的宝贵时间······

completer自动完成的更多相关文章

  1. python——使用readline库实现tab自动补全

    Input History readline tracks the input history automatically. There are two different sets of funct ...

  2. 命令自动补全模块rlcomplete

    rlcomplete定义了针对readline模块的命令自动补全函数.         当在unix平台下导入这个模块之后(前提是readline模块可用),一个Complete的实例会自动生成,并且 ...

  3. QCompleter自动补全

     知识永远是那么多,想到什么就总结什么,今天记录一下关于我对QComplete的一些小见解.   官方文档中叙述如下:     可以在任何Qt的窗口小部件中使用QCompleter提供自动补全功能,如 ...

  4. Spyder设置代码自动补全

    1.spyder 代码自动补齐设置方式在tools->preferences->IPython console->advanced Settings 下面,把User the gre ...

  5. jupyter notebook自动补全功能实现

    Jupyter notebook使用默认的自动补全是关掉的.要打开自动补全,需修改默认配置. 命令行中输入:ipython profile create 以上命令会在~/.ipython/profil ...

  6. Jupyter notebook 自动补全

    Jupyter notebook 自动补全   Jupyter notebook使用默认的自动补全是关掉的.要打开自动补全,需修改默认配置.  ipython profile create 以上命令会 ...

  7. pyqt5的QCompleter自动补全 使用模板

    相关说明 使用QCompleter类,就可以实现自动补全功能,效果图如下: 对应的代码很简单 def init_lineedit(self): # 增加自动补全 self.completer = QC ...

  8. SQL Server镜像自动生成脚本

    SQL Server镜像自动生成脚本 镜像的搭建非常繁琐,花了一点时间写了这个脚本,方便大家搭建镜像 执行完这个镜像脚本之后,最好在每台机器都绑定一下hosts文件,不然的话,镜像可能会不work 1 ...

  9. DBImport V3.7版本发布及软件稳定性(自动退出问题)解决过程分享

    DBImport V3.7介绍: 1:先上图,再介绍亮点功能: 主要的升级功能为: 1:增加(Truncate Table)清表再插入功能: 清掉再插,可以保证两个库的数据一致,自己很喜欢这个功能. ...

随机推荐

  1. java bean Format注解用法

    @NumberFormat(style=Style.NUMBER)    private int number; @DateTimeFormat(pattern="yyyy-MM-dd&qu ...

  2. C# DataTable的常用用法讲解

    在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简 ...

  3. 从CoreAnimation到Pop

    pop是Facebook在开源的一款动画引擎,看下其官方的介绍: Pop是一款在iOS.tvOS和OS X平台通用的可扩展动画引擎.它在基本静态动画的基础上,增加了弹性以及衰减动画,这在创建真实有物里 ...

  4. JS写一个简单的程序,判断年份是平年还是闰年

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. .each循环的两种使用方法

  6. bootstrap媒体查询常用写法

    @media (max-width: 768px) { /*超小屏幕设备 手机*/ } @media (min-width: 768px) and (max-width: 992px) { /*小屏幕 ...

  7. ViewPager的使用方法

    首先是 导入jar包   下载地址:android-support-v4.jar 布局文件里添加viewPager布局 [html] view plaincopy <android.suppor ...

  8. css知多少(9)——float下篇(转)

    css知多少(9)——float下篇   float内容比较多,咱们分上.下两篇来介绍,上篇已经写完,这是下篇.建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊. 1. 清除float <上 ...

  9. Ros学习——创建程序包

      1.程序包 一个程序包要想称为catkin程序包必须符合以下要求: 该程序包必须包含catkin compliant package.xml文件 这个package.xml文件提供有关程序包的元信 ...

  10. ASCII / Unicode / UTF-8 / GBK

    1 ASCII ASCII(American Standard Code for Information Interchange,美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现 ...