入力ボックスの自動マッチング（ネイティブコード）_javascriptスキル

今日、グループの誰かが Renren.com からいくつかの面接の質問を投稿しました。私はたまたま時間があったので、自分のスキルを練習するために質問を選びました。

この質問には次の要件があります:
1. ネイティブ コードを使用して実装します。フレームワークは使用できません。
2. 入力ボックスに入力された文字と一致します。内容は入力ボックスの下にメニュー形式で表示されます。
3. 一致した内容はメニュー内で太字で表示されます。キーボードの上矢印と下矢印を使用して選択し、Enter キーを押して、選択した内容を入力ボックスに書き込みます。

アイデア 入力の変更をキャプチャし、ユーザーが入力した値を使用します。ここでは、リスト項目がクエリによって返される配列 (以下、リ​​ストと呼びます) であると仮定し、入力値をリスト項目と照合する方法を使用します。各リストの値に一致する開始値を選択し、フィルタリング条件を満たす項目をページに出力します。

分析 3 番目の要件のキーワードは太字です。ここでは正規表現に置き換えてください。
4 番目のポイントは、1 つの文に多くの殺意が隠されている必要があります。まず、上下キーを押して、入力ボックスに書き込みます。

この時点で、終わったと思ったら、少なくとも 4 つの隠れたニーズがあります。
•デフォルトでは最初の項目が強調表示され、上下キーを押している間、現在の項目が強調表示されます。
•Enter キーを押すと、最初の項目がデフォルトで選択されます。
•現在の項目の上にマウスを置くと、その項目が強調表示されます。
•選択したアイテムのクリックをサポートします。
もしかしたら何かが足りないかもしれないので、ここでは気にしません。

練習 これは JS の質問ですが、最初にページ構造を記述する必要があります。

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

>

• 
  
• 
  

/ div>

フレームは許可されていないため、いくつかの可能なメソッドを簡単にカプセル化します。
まずカプセル化オブジェクトを作成し、dom という名前を付けます。次に、再利用できるようにすべてのネイティブ メソッドをこのオブジェクトに入れます。

コードをコピー

コードは次のとおりです: var dom = { $ : function( id ){ return document.getElementById(id);

},

tag : function( tagName,root ){
root = root ?
return this; makeArray( root .getElementsByTagName(tagName) );
},
bind : function( element,type,handler ){
if( document.addEventListener ){
element.addEventListener( type,handler, false );
}else if( document.attachEvent ){
element.attachEvent( 'on' type,handler );
},
removeClass : function( list,name) ){
var el = list[i],
r = new RegExp('\s*\b' name '\b\s*','g'); 0 , len = list.length ; i
var cur = list[i];
cur.className = cur .className.replace(r,'');
};
height : function( element ){
return element.offsetHeight; 🎜>getBound : function( element ){
return element.getBoundingClientRect();
},
getText : function( element ){
return element.textContent : element.innerText ?
},
trim : function( string ){
return string.replace( /^s*(.*)s*$/,'$1' ); : function( tagList ){
for( var i = 0 , arr = [] , len = tagList.length ; i arr.push( tagList[i] ); >};
戻り値
},
isVisible : function( element ){
return element.style.display == 'ブロック';
}; >

次に、特定の処理ロジックを格納するオブジェクトを作成します。作者の英語はかなり下手なので、これを autoMatch と呼びます。
このオブジェクトには多くの処理があります。
•メニューの位置を決定します。
•ユーザー入力をリアルタイムで処理します。
メニュー カプセル化されたオブジェクト dom の getBound メソッドを使用して、境界オブジェクトを返します。このオブジェクトには left と top の 2 つの属性があります。見覚えがあるかもしれませんが、jQuery の offset() メソッドに似ています。
ここで注目すべきはユーザー入力の処理です。リアルタイム処理であるため、onchange イベントの使用を検討し始めましたが、フォーカスが失われた場合にのみトリガーされるため、無理があります。
このとき、私はその仕事を十分に実行できる oninput に注目しました。

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

dom.bind( obj.input,' input' , this.inputProcess );

しかし、IE はまた型破りなことをしました。 oninput はサポートしていません。
その喜びはすべて無駄です！
何事にも必ずターニングポイントがあります。隅にある onpropertychange が徐々に近づいてきています。これは oninput に非常に似ており、少なくとも入力入力をキャプチャするという点では、まさに私たちが IE を処理するために使用しているものです。そして私たち全員がそれを使用することに同意します。
再度バインドします:

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

dom.bind ( obj.input,'propertychange' , this.inputProcess );

次のステップは、上、下、Enter キーです。対応するキーコードはそれぞれ 38、40、13 です。注意すべき点は、FF と IE の属性名が異なることです。
実装の詳細については、デモを参照してください:

クリックしてデモを表示してください 実際のビジネス シナリオでは、ユーザーの入力に対してリアルタイムの Ajax クエリが実行されることがあります。文字が入力されるたびにクエリが発生します。
ただし、Ajax リクエストを頻繁に送信するのはコスト効率が悪く、応答速度の観点からそのような実装は不可能です。
私のアイデアは、ユーザーが最初の文字を入力したときにリクエストを送信し（通常、リクエストデータの数は制限されており、通常は10）、戻り値を保存します（以下、キャッシュと呼びます）。
最初の文字がキャッシュ内でフィルタリングされた後のユーザー入力は、文字が入力されるたびに精度が高くなり、キャッシュが小さくなります。
ユーザーがクリアして再入力するときに、上記の手順を繰り返します。
もちろん、より複雑なビジネス シナリオが存在する可能性も排除されません。たとえば、十分な一致がある場合、ユーザーが入力ごとに 10 個のデータ オプションを確保する必要があり、これにはより多くの判断が必要になります。とリクエスト。
したがって、具体的な実装は実際のビジネス シナリオによって異なります。
この記事はこれで終わりです。読んでいただきありがとうございます。生身のコメントは大歓迎です。