jQueryの別のプラグインに注目してもらいたいと思います。今回は私の好みでオートコンプリートします。
説明
プラグインの最初の利点はパフォーマンスです。 すべてのクエリ結果はキャッシュされ、次回はサーバーからではなくキャッシュから選択されます。
さらに、セパレーターの使用、マルチワード検索、サーバーにリクエストを送信せずにコンポーネントをオフラインで使用する機能など、いくつかのユニークな機能があります。
IE 6.0 +、FF 2 +、Safari 2.0 +、Opera 9.0 +、Chrome 1.0+で動作します
設置
インストール手順はごく普通です。jQueryの後にjsファイルを含めるだけです。
< script type ="text/javascript" src ="jquery.js" ></ script >
<script type= "text/javascript" src= "jquery.autocomplete.js" > </ script >
* This source code was highlighted with Source Code Highlighter .
使用する
標準入力にオートコンプリートを追加します。
< input type ="text" name ="q" id ="query" />
* This source code was highlighted with Source Code Highlighter .
次に、オートコンプリートオブジェクトが初期化されます。DOMモデルのロード後にこれが行われることを確認してください。そうしないと、IEでグリッチが発生する可能性があります。
$( '#query' ).autocomplete({
serviceUrl: 'service/autocomplete.ashx' , //
minChars: 2, //
delimiter: /(,|;)\s*/, // ,
maxHeight: 400, // ,
width: 300, //
zIndex: 9999, // z-index
deferRequestBy: 0, // (), , , . 300.
params : { country: 'Yes' }, //
onSelect: function (data, value){ }, // Callback , ,
lookup: [ 'January' , 'February' , 'March' ] //
});
* This source code was highlighted with Source Code Highlighter .
serviceUrlで指定されたページはGETリクエストを受信し、レスポンスとしてデータをJSON形式で送信する必要があります。
{
query: 'Li' , //
suggestions:[ 'Liberia' , 'Libyan Arab Jamahiriya' , 'Liechtenstein' , 'Lithuania' ], //
data:[ 'LR' , 'LY' , 'LI' , 'LT' ] // , . callback
}
* This source code was highlighted with Source Code Highlighter .
オブジェクトの関数を使用して、いつでもパラメーターを再初期化するだけでなく、自動入力を有効/無効にすることができます。
var ac = $( '#query' ).autocomplete({ /**/ });
ac.disable();
ac.enable();
ac.setOptons({ zIndex: 1001 });
* This source code was highlighted with Source Code Highlighter .
様式化
きしみ音は、次のマークアップフラグメントを作成します。
< div class ="autocomplete-w1" >
< div style ="width:299px;" id ="Autocomplete_1240430421731" class ="autocomplete" >
< div >< strong > Li </ strong > beria </ div >
< div >< strong > Li </ strong > byan Arab Jamahiriya </ div >
< div >< strong > Li </ strong > echtenstein </ div >
< div class ="selected" >< strong > Li </ strong > thuania </ div >
</ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
CSSスタイルの例を次に示します。
.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
.autocomplete strong { font-weight:normal; color:#3399FF; }
* This source code was highlighted with Source Code Highlighter .
参照資料
説明： www.devbridge.com/projects/autocomplete/jquery
ここからプラグインをダウンロードします： www.devbridge.com/projects/autocomplete/jquery/#download
Jsプロトタイプバージョン： www.devbridge.com/projects/autocomplete/#download
UPD
他のフレームフォークの同様のソリューション
MooTools： www.ajaxdaddy.com/mootools-autocomplete.html （ Zyavaに感謝）