検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >jQuery検索キーワード自動マッチングプラグイン_html/css_WEB-ITnose

jQuery検索キーワード自動マッチングプラグイン_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:07:091156ブラウズ

Google のような専門的な検索エンジンでも、通常の Web サイトでも、多くの人が検索バーのキーワードを自動的に照合する機能を使用したことがあると思います。この記事では、このキーワード マッチング技術の実装について紹介します。 jQuery もちろん、キーワード マッチング テクノロジを独自のシステムに統合するには、バックグラウンド コードへのリンクも必要です。

今日の Web デザインにおいて、ユーザー エクスペリエンスの向上は企業にとって最も重要なことの 1 つです。検索フォームでは、入力コンテンツの一部に基づくキーワード一致プロンプト機能が最も直観的で一般的に使用される対話型エクスペリエンスであり、同様の機能がほとんどのインターネット Web サイトで使用されています。たとえば、Google の検索ボックスの効果は次のとおりです。

ここでは、検索キーワードの自動一致プロンプトを実装する jQuery メソッドを示します。 jQuery AutoComplete は、jQuery に基づいて検索キーワードの自動一致プロンプトを実装するプラグインです。このプラグインは、強力な拡張性と優れたパフォーマンスを備えており、IE 6.0 以降と互換性があります。 FF 2 以降、Safari 2.0 以降、Opera 9.0 以降、Chrome 1.0 以降、およびその他の主流ブラウザ。

デモ効果: http://www.devbridge.com/projects/autocomplete/jquery/#demo

具体的な使用方法は次のとおりです:

1. 設定

ホーム ページを使用して js を追加します。プラグインのコードを自分のプロジェクトに埋め込みます。

2、使用方法
1

2

< スクリプト src = "jquery.js" type = "text/javascript" > /スクリプト >

< スクリプト src = "jquery.autocomplete.js" >

自動照合プロンプトを実装する入力フォームにAutoComplete関数を追加します。

1

< 入力 ID = "クエリ" 名前 = "q" />

DOM オブジェクトが正しく読み込まれるように AutoComplete オブジェクトを初期化します。そうしないと、IE のユーザーにエラーが発生する可能性があります。

1

1

2

3

4

5

6

7

8

9

10

11

12

$( '# query '）.autocomplete（{

query'）。ユーザーが入力している間に大量のリクエストを送信したくない場合は、通常、遅延を 300 ミリ秒に設定します

params: { country: 'Yes '}, // 追加パラメータ

onSelect: function(data, value) { }, // 提案されたオプションの 1 つが選択された場合にトリガーされるコールバック関数、

lookup: [' January ', ' February ', 'March'] // ローカル オートコンプリートの提案のリスト

});

テキストフォームの入力情報に基づいてキーワードプロンプトマッチングを実行します。

2

3

4

5

1

{

クエリ: 'Li' , // 元のリクエスト

提案:[ 'Liberia' , 'リビアアラブJamahiriya' , 'Liechtenstein' , 'Lithuania' ], // 提案のリスト

data:[ 'LR' , 'LY' , 'LI' , 'LT' ] // オプションのパラメーター: 提案オプションのキーのリスト。コールバック関数で使用されます。

}

jQuery AutoComplete プラグインは、エフェクトのオンとオフを制御するオン/オフ関数をサポートしています。

2

3

4

var ac = $( '#query' ).autocomplete({ /*parameters * / });

ac.disable( );

ac.enable();

3. プレゼンテーション スタイルを設定します

最後に、div と CSS を使用してプレゼンテーション効果を美しくします。

5

1

2

3

4

5

6

7

8

< div クラス = "autocomplete-w1" > div id = "Autocomplete_1240430421731" class = "autocomplete" style = "width: 299px;"

< 強い >Liベリア < ><強い>/強い>アラブ・ジャマヒリヤ<強い>>エクステンシュタインクラス = "選択済み" ><強い >/強い >トゥアニア

1

2

3

4

.autocomplete-w 1 { 背景 : URL (img/shadow.png) 繰り返しなし 右下の位置 ;絶対; 上: 0px ; 左 : 0px ; マージン : 6px 0 0 6px ; /* IE6 修正: */ _background : 1px 0 0 0 ; }

{ 背景 : #FFF ;デフォルト ; テキスト整列 : 左 ; オーバーフロー : 自動 ; -6px 6px -6px ; /* _height : 350px ; _overflow-x ;
.autocomplete .selected { 背景 : #F0F0F0 ; }

.autocomplete div { パディング : 2px 5px ; オーバーフロー : 非表示 } ; }

jQuery AutoComplete プラグインの公式リンク

プラグインの紹介

: www.devbridge.com/projects/autocomplete/jquery/

プラグインのダウンロード

: www.デブブリッジ.com/projects /autocomplete /jquery/#download

ここでは、MooTools フレームワークに基づく別のキーワード自動一致プロンプト メソッドを示します:

MooTools: www.ajaxdaddy.com/mootools-autocomplete.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Server_html/css_WEB-ITnose の YUI フロントエンドの最適化次の記事：Server_html/css_WEB-ITnose の YUI フロントエンドの最適化

関連記事

続きを見る