Flexdatalist - をサポートするオートコンプリートプラグイン

の HTML5 素子 現代のフロントエンド開発に非常に便利です。それでも、多くの開発者が知らない要素の1つです。.

それはあなたができる入力フィールドで機能します 入力に対して特定の値を自動提案する. デフォルトの設定は問題ないようですが、自動候補データリストを使ってクールな効果を構築するためのコーディングのヒントをいくつか取り上げました。.

しかし、それははるかに簡単です プラグインを扱う といった Flexdatalist. それ より幅広いブラウザをサポート そしてあなたがすることができます データリストのデザインを完全にカスタマイズする.

すべての人がオートコンプリート機能を必要としているわけではなく、ネイティブのHTML 5データリストを持っている人もいますが、プラグインを気にする必要はないかもしれません。しかし、Flexdatalistはおそらくその中で最高のものです。 ネイティブのデータリストの振る舞いに基づく たす：

それは すべてjQueryを搭載, そうあなたは 最新版のコピーが必要です これを実行するために。また 独自のCSSスタイルシートが付属しています HTTPリクエストを減らすために単一のCSSファイルに結合することをお勧めします。.

発見できる フルセットアップ手順 含まれているメインのデモページに Flexdatalistファイルへのリンクのダウンロード.

設定はとても簡単です。 1行のJavaScript. デフォルトでは、プラグイン クラスを持つすべての入力をターゲットにします .フレクダリスト, そのため、コードにそれを追加するだけで、結果が表示されます。.

追加するだけです入力フィールド内の要素とFlexdatalistが残りを処理します。それは リストを自動スタイルする, オプションの説明文を含む.

テキストを追加する最も簡単な方法は JSONファイルを介して あなたができる データ属性を介して入力に添付する.

たとえば、Flexdatalistデモページをチェックアウトすると、 “国” 属性を持つ入力フィールド data-data = 'country.json'. これはリモートファイルを参照します。 すべての生入力データを外部に保存します.

あなたができるこれらの分野のあまりにも多く ページを少し遅くする. しかし、このjQueryプラグインを使っても言うまでもなく、多くのサイトがこれらのデータリストフォームを1ページに複数実行することは想像できません。 まだかなり速い.

はじめに、 GitHubリポジトリにアクセスしてコピーをダウンロードする. これには メインデモページへのリンク これにはセットアップ、JavaScriptオプション、そしてたくさんのサンプルコードスニペットの完全なドキュメントもあります。.