jQuery自動完成插件：completer

jopen 8年前發布 | 42K 次閱讀 jQuery jQuery自動完成插件 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"]
    });
});

選項設置

Completer插件提供了豐富的選項設置和方法調用。

選項 說明 默認值
complete 當輸入完成時觸發 function() {}
itemTag 彈出展示面板中的列表元素標簽 "li"
filter 過濾函數，當輸入后會先過濾相關列表內容再展示列表 function(val) { return val; }
position 彈出列表面板相對輸入框的位置，值有"top", "right", "bottom", "left". "bottom"
source 將要自動補全展示的數據 []
selectedClass 當彈出面板中的選項被選中時的樣式 "completer-selected"
separator 分隔符，將輸入的內容與建議自動完成的部分分隔，如@ ""
suggest 如果設置成true，將會進入建議suggestion模式，將自動匹配所輸入的內容 false
template 彈出面板的模板 "<ul class="completer-container"></ul>"
zIndex 彈出面板的css中的z-index值 1

更多有關completer的內容請關注completer官網地址： https://github.com/fengyuanchen/completer 。

來自： http://www.helloweba.com/view-blog-342.html

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！