jqueryのオートコンプリート・学習

基本的なを使用する前にまず、

公式サイト:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

現在のバージョン:1.0.2

1.2.6:jQueryのバージョンが必要です

第二に、使用

<スクリプトSRC = "./ jqueryの - 1.3.2.js" タイプ= "テキスト/ javascriptの"> </ SCRIPT>

<スクリプトSRC = "./ jquery.autocomplete.js" タイプ= "テキスト/ javascriptの"> </ SCRIPT>

<リンクのrel = "スタイルシート" のhref = "./ jquery.autocomplete.css" />

オートコンプリート(URLまたはデータ、オプション)戻り値:jQueryの

入力またはTEXTAREAは、オートコンプリート機能を持ってみましょう

JSコード

VARデータは=「コアセレクタはトラバース操作CSSイベント効果のAjaxユーティリティを属性」.split(」「);  

$( "#例")オートコンプリート(データ)。

上記の例では、IDの例にオートコンプリートを追加することです

VARメール= [

    {名: "ピーターパン"、へ: " [email protected] "}、

    {名を「モリー」、「[email protected]」}、

    {名: "Forneriaマルコーニ"、に" [email protected] "}、

    {名: "マスター<EM>同期</ EM>"、に" [email protected] "}、

    {名: "博士の<strong>テック</ strong>のデログ"に" [email protected] "}、

    {名: "ドンコルレオーネ"、に" [email protected] "}、

    {名: "MCチック"、に" [email protected] "}、

    {名: "ドニーダルコ"、に" [email protected] "}、

    {名に「クエイクザ・ネット」、「[email protected]」}、

    {名: "ドクター・ライト"、へ: " [email protected] "}

];

//メールアレイフォーマット上述したように、formatItemが表示形式を表し、formatMatchはするformatResult内容が結果を示し、マッチングコンテンツを表します

$( "#のsuggest13")。オートコンプリート(電子メール、{

    minChars:0、

    幅:310、

    matchContains:真、

    autoFillの:偽、

    formatItem:関数(行、I、MAX){

        " "+ row.name + "/" [" + row.to +"];: "/" I + "/" +最大+返します

    }、

    formatMatch:関数(行、iは、MAX){

        row.name + "" + row.toを返します。

    }、

    するformatResult:関数(行){

        row.toを返します。

    }

});

三つのパラメータ:

* MinChars(番号):

    文字.DEFAULTトリガオートコンプリートの少なくとも数であなたが入力する必要がある前に:1.もし0に設定、表示されたリストをダブルクリックするか、入力ボックスに入力ボックスの内容を削除

*幅(番号):

    指定ドロップダウンボックスデフォルト:.幅入力要素の幅

*最大(番号):

    プルダウン.DEFAULTオートコンプリートで表示される項目の数:10

*遅延(番号):

    (ミリ秒単位)オートコンプリートキーストローク起動時間の遅延の後.DEFAULT:リモートローカル400 10

* autoFillの(ブール値):

    ユーザが現在ユーザが入力ボックスのデフォルトを選択したときに充填された場合に、マウスのない値を自動的に行います:.偽

* mustMatch(Booolean):

    trueに設定すると、オートコンプリートは、マッチング結果は、入力ボックスに表示されるすべてがユーザーによって入力されたとき時に不正な文字、ボックス.DEFAULTをドロップダウンしませんできるようになります:偽

* matchContains(ブール値):

    あなたは、このようなBAのBA一致fooのバーが使用キャッシングにとってより重要ではないかと、文字列マッチングの内側に表示するかどうかを決めるの比較と.DEFAULTを混ぜオートフィル..偽

* selectFirst(ブール値):

    セット真、最初の値にすると、ユーザーの種類]タブまたはキーオートコンプリートのドロップダウンリストが自動的にそれを手動で(キーボードやマウスによって)選択されていなくても、選択されます。もちろん、ユーザーが使用、その後、項目を選択した場合に返された場合ユーザーが選択した値のデフォルト:.真

* cacheLength(番号):

    バッファに結果セットにレコードの数を設定するためにデータベースから取得され、バッファ長が.DEFAULT :. 10にキャッシュされていません

* matchSubset(ブール値):

    サーバーのクエリをキャッシュするオートコンプリートすることができます私の使用、fooのキャッシュクエリの結果は、ユーザーがfooを入力した場合、キャッシュを使用して、直接、検索する必要がない場合。このオプションは、パフォーマンスを向上させるために、サーバーの負担を軽減するために通常は開いている。のみバッファ長が1より大きい場合.DEFAULTが有効であろう:真

* matchCase(ブール値):

    偽..:あなたがオプションを理解している場合、これは足のFOOのようにかないキャッシュは.DEFAULTを見つけるには、理解するのは難しいことではありませんキャッシュを使用するときに、大文字と小文字を区別し、スイッチがより重要になっているの比較

*複数(ブール値):

    入力された複数の値、すなわち、複数の値に対して複数の入力を使用することを許可するかどうかオートコンプリートデフォルト:.偽

* multipleSeparator(文字列):

    それは複数の選択肢である場合は、選択した各デフォルトの文字を区切るために使用:.「」

*スクロール(ブール値):

    結果セットは、デフォルトの高さよりも大きい場合、スクロールデフォルトを使用して表示されます。真

* scrollHeight(番号):

    自動的にピクセルサイズをデフォルトに代表されるリールの高さが要求されます:180  

* formatItem(機能):

    表示自動入力補完とLI要素が含まれます、戻り値になります行ごとのコールがドロップダウンリストには(行、I、max)の3つのパラメータを提供することをあなたは、この機能を表示したい各項目の高度なタグを使用します..:結果の数は、アレイ、現在処理された行の数(すなわち、最初のいくつかの項目は1から始まる自然数である)現在の配列要素の数、すなわち、結果の項目は、デフォルト:.なし、この手段ないカスタムハンドラことを返さ各行、ドロップダウンリストから1つの値のみが含まれてよう。

*するformatResult(機能):

    そして、同様のformatItemが、値がテキスト入力ボックス形式に入力することができるにも3つのパラメータを有し、formatItemは.DEFAULT :.なし、のいずれかでのみデータがformatItemが提供された値のいずれかを使用して、示しています。

* formatMatch(機能):

    データの必要性の行ごとに、フォーマットデータフォーマットにこの機能を使用する。戻り値は、内部検索アルゴリズムパラメータ値の行のために使用されます

* extraParams(オブジェクト):

    背景(通常はサーバーサイドスクリプト)パラメータや、より一般的な方法を提供するが、値が過去に渡された場合、キーオブジェクトとして使用することです{バー:4} ..、自動入力補完my_autocomplete_backend.phpに解決されますか? Q = FOO&バー= 4デフォルト(現在のユーザ入力FOOを想定):. {}

*結果(ハンドラ)戻り値:jQueryの

    ユーザーが項目を選択した後、このイベントがトリガされます、パラメータは次のとおりです。

    イベント:.結果についてevent.typeイベントオブジェクト。

    データ:選択したデータライン。

    書式設定:関数によって返される値するformatResult

    例えば:

    $( "#singleBirdRemote")。結果(関数(イベント、データ、フォーマットされました){

//などの他のイベントをトリガ割り当て、などの追加のコントロールを選択します

});

第四に、問題に注意を払います:

1.中国を検索するときにいくつかは、問題でインターネットの契約を言うが、このバージョンをテストしても問題ありません^ - ^を

2.遠隔デフォルトのパラメータが渡されたアドレス、使用する場合:Q(入力値)、リミット(リターン結果の最大値)を使用することができる他のパラメータ渡さextraParams

渡されるデフォルトを使用し、AJAX通過パラメータを使用して、そしてそれはあなたが見つかった引数を経由してポストを提出することができる方法はありません3.autocomplete。

解決策1:(。Request.getParameter( "Q")GetBytesメソッド( "ISO8859-1")、 "UTF-8")GET方法で、新しいStringパラメータ値を使用して、AJAX転送中国を使用しているときが得られます

解決策2:ポストのための方法を変更得るために変更jquery.autocomplete.jsコード、その後、AJAX前の中国でのゴミ問題を解決ご覧ください

 

ます。<script type = "text / javascriptの">
$()。レディ(関数(){

 関数formatItem(行){
  リターン"<IMG SRC = '.. / .. / tinyphoto / "+行[0] +"。JPG' ALIGN = 'absmiddle' />" +行[0] +」「+行[1]。
 }

 $( "#singleBirdRemote")オートコンプリート ( "AJAX 測定2.asp"、{。
  幅:260、
  最大:12は、ある
  selectFirst:偽、//使用にカンマの前に
  
  formatItem、formatItem //::formatItem対応背中上部formatItem関数機能、   
  //するformatResult:するformatResult
  / *
  するformatResult:機能(データ値){
   戻りvalue.split( "|")[1];
  }
  
  //スクロール:trueに、
  scrollHeight:420
 });

 / *
 $( "#SingleBirdRemote")。結果(機能(イベント、データ、フォーマット済み){
  IF(データ)
   $(この).parent()。次()。検索( "INPUT")。ヴァル(データ[。1 ]);
 });いくつかのヒントを他のデータ入力部に挿入される
 * /
});
</ SCRIPT>

公開された16元の記事 ウォンの賞賛1 ビュー30000 +

おすすめ

転載: blog.csdn.net/wvtjplh/article/details/5272232