提案付き検索フィールドの記述。 Javascriptのフォーカスの問題

Question

私は自分のウェブサイトの検索フィールドをスクリプトしています。ユーザーが入力すると、フィールドの下に検索候補が表示されたボックスが表示されます。提案は、キーボードの移動とクリックが可能です。

しかし、ユーザーのクリックがページの別の場所に表示されると、表示が消えるのは問題です。私はonBlur（）ハンドラを検索フィールドに追加しましたが、ユーザーが提案の1つをクリックすると、クリックの前にぼやけが発生し、提案ボックスが消え、clickイベントが提案。

ここに私のHTMLは次のようになります。そこで質問は、フォーカスが検索フィールドを離れたときに焦点を当てた新しい要素が提案されたときに、私は以外、suggestions_box要素を非表示にすることができますどのように、ある

<input type="text" id="search_field" onBlur="hideSuggestions()" /> 
<div id="suggestions_box"> 
    <ul> 
    <li onClick="doSomething(1)">suggestion1</li> 
    <li onClick="doSomething(2)">suggestion2</li> 
    </ul> 
</div> 

ボックス？

Answer 1

あなたのフォームタグの内側にボックスdivを入れたまま、onBlurをフォームに配置します。

<form id="myform" onBlur="hideSuggestions()" > 
    <input type="text" id="search_field" /> 
    <div id="suggestions_box"> 
     <ul> 
      <li onClick="doSomething(1)">suggestion1</li> 
      <li onClick="doSomething(2)">suggestion2</li> 
     </ul> 
    </div> 
</form> 

[編集]これはうまくいくと思っていますが、今はテストできません。 w3schoolsでのjavascriptの参照では、フォームタグがonblurをサポートしていると言われていますが、フォーム要素やフォームタグ内にある必要があるかどうかは分かりません。

Answer 2

まず、あなたのhideSuggestions機能へblurイベントを渡すことを確認してください。

function hideSuggestions(event) { 
    var target = event.relatedTarget || event.toElement, 
     suggestions = document.getElementById('suggestions_box'); 

    if (contains(suggestions, target)) 
     // user did something inside suggestions box. 
     return; // Do nothing. 

    // box hiding code as before... 
} 

// contains(haystack, needle): fast lookup of whether haystack is a parent of needle. 
var contains = document.compareDocumentPosition 
      ? function(a, b) { return !!(a.compareDocumentPosition(b) & 16) } 
      : function(a, b) { return a !== b && (a.contains ? a.contains(b) : true) }; 

Answer 3

私が持っていた：ぼかしが提案ボックス内のイベントによって引き起こされた場合は、チェック

<input type="text" id="search_field" onblur="hideSuggestions(event)" /> 

次同じ問題を抱えてこの質問に出くわす。私もjQueryを使用しており、mouseoutはrelatedTargetを持つ唯一のイベントのようです。実際、現在のブラウザーのどれもこれをサポートしていません（ちょうどFirefox 4とIE 9がチェックされています）。

私はドキュメントのmousedownを使ってこれを解決しました。私は、進行中の検索を示す変数を持っています。 mousedownがこの状態で発生した場合は、クリックされたターゲットに特定のクラスがあるかどうかを確認します。これは、提案を選択するためだけに使用されます。それ以外の場合、提案は隠されます。

event.targetは、nodeName、id、classNameなどのすべての種類のものを探すことができるjQuery要素です。

$(document).mousedown(function(event) { 
if (ongoingSearch) { 
    if (event.target.className != "uniqueClassname") { 
     hideSuggestions(); 
    } 
} 

}）;

Answer 4

ここではCSSを使用できます。 Javaスクリプトは必要ありません。

cssは次のようになります。

#search_field:focus+#search_box 
{ 
    display:block; 
} 
#search_box 
{ 
    display:none; 
} 

Answer 5

<input type="text" id="search_field" onBlur="hideSuggestions()" /> 
    <div id="suggestions_box"> 
     <ul> 
     <li onClick="doSomething(1)">suggestion1</li> 
     <li onClick="doSomething(2)">suggestion2</li> 
     </ul> 
    </div> 

あなたはその後、適切な処理のための提案の表示を確認し、body要素にonclickのを使用することができます。

$('body').click(function(e){ 
    if($('.suggestions_box>ul').is(':visible')) $('.suggestions_box>ul').hide(); 
}) 

私はあなたがここに（doc truyen）を参照するための例を持っている、それはあなたに