JavaScript サジェスト効果自動補完コード共有_JavaScript スキル

まず、使用するフレームワークはもちろん私のフレームワークです。もちろん、jQueryなど他のフレームワークを使用することもできます。原理さえ理解していれば、すぐにできますよ。おそらく、今後の仕事で検索ボックスを構築するタスクに遭遇することになるでしょう。

バックエンドがないので、オブジェクトをローカル データベースとして使用します。私が今やりたいことは、実際には提案よりもはるかに高度で、IDE の構文プロンプトに似たものです。現在の完成品はgithubに公開しています。

よし、やってみよう。 1 つ目は構造層です。FF をインストールしている学生は、数文字を入力すると HTML が動的に生成されます。しかし、何はともあれ、結果として、検索バーの下に DIV が配置され、その中にテーブルがあり、そのテーブルに候補単語が動的に格納されます。また、候補単語がユーザー入力の一部ではない場合、つまり JS によって自動的に追加された部分である場合は、それらを b タグに入れて太字で表示します。ただし、table を使うのは負荷が高すぎると感じたので、IE6 でもスキミングカラー効果をサポートするために、代わりに ul リストを使用することにしました。単語を選択しやすくするために、単語の完成後に語彙を保存するために特別に使用される属性 (タグ) も追加しました。おそらく次のようになります:

コードをコピー コードは次のとおりです:

">

• 
  
  ユーザー入力部分
  自動プロンプト部分
  
value= "完全な語彙" href="javascript:void(0)">
ユーザー入力部分
自動プロンプト部分
;/li>
!-- 最大 10-->

実際には 2 つの部分で構成されています。 div#search_wrapper は可視であり、 div#suggest_wrapper は "invisible" です (li 要素がない限り、スペースを占有せず、表示できません)。 ）。入力検索ボックスには autocomplete 属性があり、ブラウザに付属のプロンプト機能をオフにするために使用されます。 data-value に関しては、この名前付け方法が HTML5 で推奨されており、最先端のブラウザーでは、Data-* がデータセットと呼ばれるオブジェクトに配置されるように、キャッシュされるデータを定義するために使用されます。例:




コードをコピー

コードは次のとおりです:

data- Drink="coffee" data-meal-time="12:00">12:00

でアクセスできます次の方法:

コードをコピー

コードは次のとおりです:

var el= document。 getElementById('Situ Zhengmei') ; alert( el.dataset. Drink ); もちろん、 innerText または textContext。 注: 完全な語彙 = ユーザー入力部分と自動提案部分。したがって、スペースやその他のものが表示されて検索が失敗するのを防ぐために、a タグにあまり多くのものを追加しないでください。 次にスタイルの部分がありますが、詳細には触れません。非常に簡単です:

コードをコピーします

コードは次のとおりです:


#search_wrapper {

高さ:50px; } 幅:300px; #suggest_wrapper{ 位置:相対; >位置: 絶対; リストスタイル: なし; 背景:#fffafa; 1px ソリッド # ccc;

border-bottom:0 none;

#suggest_list li a{
height:20px;
>color: #000;
border-bottom:1px Solid #ccc;
line-height:20px;
#suggest_list li a:hover, .glow_suggest {
背景:#ffff80
}


さて、本題に入りましょう。バックエンドがないので、ローカル オブジェクトをローカル データベースとして使用したいと考えています。このオブジェクトはもちろん JS オブジェクトです。通常、走査するオブジェクトは obj.aaa.bbb.ccc です。この方法でクリックし続けると、実際には、ドット番号に到達するたびに for in ループを使用して走査することになります。したがって、テキストの内容の入力を監視し、変更された入力ボックスの内容を取得して、for in ループ内で比較します。この入力値で始まる属性の場合は、それを取り出して 10 個になるまで配列に入れ、これらの配列の内容を上記の li 要素形式に結合し、ul 要素に貼り付けます。その中で、ドットにも注意する必要があります。最初にドット番号を入力すると、将来そのドット番号に遭遇したときに、このオブジェクトの 10 個の属性が取得されます。
それでは、コードを書き始めましょう。私のフレームワークが使用されているので、ここから進んでください。プロジェクトのホームページには README があり、micro.Net サーバーのインストール方法とドキュメントの表示方法が説明されています。最初は、モジュールロード機能が追加された jQuery と考えることができます。API は 90% 似ています。イベント モジュールと属性モジュールを使用する必要があります。これは、関連する依存関係をロードし、ready パラメーターを追加し、domReady の後に実行されます。入力ボックスを選択したら、それに入力イベントをバインドします。これは、私のフレームワークは IE ですでに互換性があります。jQuery とネイティブを使用する学生は、propertychange イベントを使用してシミュレートしてください。

コードをコピー コードは次のとおりです:

//Situ Zhengmei 作成
$ .require( "ready,event,attr",function(){
var search = $("#search"), hash = window, prefix = "", fixIE = NaN;
search.addClass(" search_target") ;
search.input(function(){//モニタリング入力
var
input = this.value,//元の値
val = input.slice( prefix.length), //値を比較
output = []; //出力内容を配置するために使用されます
if( fixIE === input){
return //入力の値であっても IE 修正がトリガーされますボックスはプログラムを通じて変更されます propertychange イベントにより、上下を反転することができなくなります
}
for(var prop in hash){
if( prop.indexOf( val ) === 0 ){//入力値から始まるインデックスを取得 API
if(output.push( '

" (prefix prop ).slice(input.length ) "

" ){
break; >}
}
}
//前方にドットが見つかった場合、または後方にドットがキャンセルされた場合
if( val.charAt(val.length - 1) === "." | | (input && !val) ){
var arr = input.split(".");
for(var j = 0; j var el = arr[j ];
if(el && hash[ el ]){
hash = hash[ el ];//API を通過するようにオブジェクトをリセットします
}
}
prefix = input == "." ? "" : input;
for( prop in hash){
if( '

' input "" (プレフィックス prop ).slice( prefix.length ) " /a>

> ;" ) == 10){
break;
}
}
}
$("#suggest_list").html(output.join(" ") );
if(!input){//すべてリセット
hash = window;
fixIE = prefix = Output = [];
}
});
} );


プロンプトリストが出たら、上下の効果を監視します。つまり、キーボードの方向キーをクリックすると、要求された項目が上下に強調表示され、検索ボックスに項目が入力されます。この時点で、keyup イベントをバインドし、その keyCode を確認する必要があります。私のブログ投稿「

JavaScript キーボード イベントの概要
」を参照してください。実装原理は非常に簡単で、ハイライトされた位置 (インデックス値) を格納するための周辺変数を定義し、上にスクロールするときに 1 ずつ減らし、下にスクロールするときにすべてのタグを取得します。インデックス値を使用して特定の a タグを見つけて強調表示し、最初に強調表示されていた a タグを削除します。

コードをコピー コードは次のとおりです:

//Situ Zhengmei 作成
$.require("ready,event,attr",function(){
var search = $("#search"), hash = window, prefix = "";
search.input(function(){//モニター入力
//....
});
var glowIndex = -1; .keyup(function(e){//上下を監視します
if(/search_target/i.test( e.target.className)){//パフォーマンスを向上させるために特定の要素のみをプロキシします
var upOrdown = 0
if(e.that === 38 || e.that === 104){ //up 8
upOrdown --;
}else if(e.that === 40 || e .that === 98){//down 2
upOrdown ;
if(upOrdown){
var list = $("#suggest_list a");強調表示された列を転送します
list.eq(glowIndex).removeClass("glow_suggest");
glowIndex = upOrdown;
var el = list.eq(glowIndex ).addClass("glow_suggest"); fixIE = el.attr("データ値")
search.val( fixIE )
if(glowIndex === list.length - 1){
glowIndex = -1; 🎜>}
}
});
});


最後に Enter キーを押して送信します。別のキーアップイベントを書きました。もちろん、2 つのキーアップを 1 つに結合することもできます (モニタリング ウィンドウ)。私は純粋に教育目的でこの方法を書きました。

コードをコピー

コードは次のとおりです: //Situ Zhengmei 作成$ .require( "ready,event,attr",function(){ var search = $("#search"), hash = window, prefix = ""; search.input(function(){/ /入力をリッスン

//....

});
var glowIndex = -1
$(window).keyup(function(e){//up と下スクロール
// .....
});
search.keyup(function(e){//送信をリッスン
var input = this.value;
if( input && (e.that == 13 || e.that == 108)){ //ENTER キーを押すと
alert(input)//実際のプロジェクトでは、ページがジャンプして次のページに移動するはずです。検索結果ページ }
});


この時点で、提案効果は完了です。私のフレームワークをダウンロードした場合は、サーバーをオンにしてドキュメントのホームページを開くと、この効果を確認できます。実際のプロジェクトでは、入力ボックスのテキストが変更されると、AJAX はバックグラウンドで配列を要求し、それを li 要素の形式に結合します。