completer自动完成

来源：互联网发布：嗨推淘宝客论坛编辑：程序博客网时间：2024/06/02 00:30

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

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>

效果图：

参数分析：

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

1 1