jQuery オートコンプリート プラグイン コンプリーター (ソース コード付き) download_jquery

我们在表单输入的时候，如要输入邮箱之类，只需输入邮箱名前段，那么@后面的内容将自动补全，将常用的几个邮箱列出来，用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成，这些都由插件completer来帮您实现。

效果展示图如下所示：

效果展示       源码下载

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"] 
 }); 
}); 

選項設定

選項	說明	預設值
complete	當輸入完成時觸發	function() {}
itemTag	彈出展示面板中的清單元素標籤	"li"
filter	過濾函數，輸入後會先過濾相關列表內容再展示列表	function(val) { return val; }
position	彈出清單面板相對輸入框的位置，值有"top", "right", "bottom", "left".	"bottom"
source	將要自動補全展示的資料	[]
selectedClass	當彈出面板中的選項被選取時的樣式	"completer-selected"
separator	分隔符，將輸入的內容與建議自動完成的部分分隔，如@	""
suggest	如果設定成true，將會進入建議suggestion模式，將自動符合所輸入的內容	false
テンプレート	ポップアップパネルのテンプレート	"
zIndex	ポップアップパネルの CSS の Z インデックス値	1

コンプリーター プラグインは、豊富なオプション設定とメソッド呼び出しを提供します。