简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

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

WBOY
リリース： 2016-06-24 12:07:09
オリジナル
1093 人が閲覧しました

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
関連ラベル：
jQuery的搜索关键词自动匹配插件
ソース：php.cn
前の記事：Server_html/css_WEB-ITnose の YUI フロントエンドの最適化 次の記事：デューイ ? Chrome にタグを付けて検索する_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1693
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1857
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1571
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1481
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1529
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！