jQuery auto-complete plug-in completer with source code download_jquery

フォーム入力時にメールアドレスなどを入力したい場合は、メール名の最初の部分を入力するだけで、@以降の内容は自動的に入力され、よく使うメールアドレスがいくつか入力されます。がリストされるので、ユーザーはフォームに入力するだけで済みます。時間とドメイン名の入力は、すべてプラグイン コンプリーターによって自動的に実行されます。

エフェクトの表示画像は次のとおりです:

エフェクト表示 ソースコードダウンロード

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

Option settings

オプション	説明	デフォルト値
完了	入力が完了すると起動します	関数() {}
アイテムタグ	ポップアップ表示パネルのリスト要素タグ	「リ」
フィルター	フィルター機能。入力後、まず関連するリストの内容をフィルターしてからリストを表示します	関数(val) { 戻り値 }
position	The position of the pop-up list panel relative to the input box, the values ​​are "top", "right", "bottom", "left".	"bottom"
source	The displayed data will be automatically completed	[]
selectedClass	Style when the option in the popup panel is selected	"completer-selected"
separator	separator, separates the input content from the suggested auto-complete part, such as @	""
suggest	If set to true, it will enter the suggestion mode and automatically match the entered content	false
template	Template for popup panel	" "
zIndex	Z-index value in popup panel’s css	1

Completer plug-in provides rich option settings and method calls.