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に感謝）