jQuery は Twitter の自動テキスト補完を実装します Effects_jquery

上記の効果は、jQuery プラグイン Typeahead.js を使用して実現できます。この jQuery プラグインは Twitter の新しいプロジェクトから来ており、リモート データ セットとローカル データ セットをサポートしています。ユニークな機能は、ローカル ストレージを使用してデータ セットをローカルに保存できることです。これにより、ユーザー エクスペリエンスが効果的に向上します。また、(リクエスト頻度、同時リクエストの最大数など) など、リモート データ セットを処理するための多くのオプションもあります。

主な機能

ローカル データの保存、クライアントの読み込み、読み込み速度の最適化をサポート
多言語をサポートし、アラビア語もサポートします
Hogan.js テンプレート エンジンの統合をサポート
複数のデータセットのアセンブリをサポート
ローカルおよびリモートのデータセットをサポート

プロジェクトアドレス

http://twitter.github.io/typeahead.js

使用方法

まず、jQuery フレームワークと、Typeahead.js プラグインの関連する JS ファイルと CSS ファイルを Web ページの先頭に導入します

コードをコピーします コードは次のとおりです:

次に、 アニメーション化する HTML 要素

を追加します ( など)。

コードをコピーします コードは次のとおりです:

最後に

初期化

コードをコピーします コードは次のとおりです: ソースを表示

$( '#demo' ).typeahead({

名前: 'テスト' 、
ローカル: [ "Site518" 、 "Lwolf" ]、
制限: 10
});