WEB技术分享

HTML

首先载入jQuery库和插件completer.js，当然还有相关CSS样式文件，这些都在源码下载里已打包好了。

<script src="jquery.js"></script>
<script src="completer.js"></script>
<link  href="completer.css" rel="stylesheet">

接下来我们在页面中需要放置输入框的地方放置如下代码，这是一个要求用户输入邮箱的输入表单。

<input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail">

Javascript

直接$(element).completer()调用，非常简单，如果不想用函数调用的方式也可以在元素上使用data-toggle="completer"和data-*属性来调用插件效果。

$(function(){
	$("#auto-complete-email").completer({
		separator: "@",
		source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"]
	});
});

选项设置

Completer插件提供了丰富的选项设置和方法调用。

更多有关completer的内容请关注completer官网地址：https://github.com/fengyuanchen/completer。

今天是2016年元旦，Helloweba在这里祝各位关注和支持我们的网友元旦快乐，新年万事如意，心想事成！