jQuery自動完成插件completer的使用方法

本篇文章給大家分享的是有關jQuery自動完成插件completer的使用方法，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

我們在表單輸入的時候，如要輸入郵箱之類，只需輸入郵箱名前段，那么@后面的內容將自動補全，將常用的幾個郵箱列出來，用戶只需選擇一下就可以完成表單的輸入。諸如此類的還有時間的輸入、域名的輸入都能自動完成，這些都由插件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

以上就是jQuery自動完成插件completer的使用方法，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。