5

AJAX「autosuggest」ボックスを実装しています。ユーザーが入力テキストフィールドに文字列を入力すると、テーブルのある非表示の div が表示され、行をクリックするか、上/下矢印でリストをスクロールできます; その間、フォーカスは引き続き入力テキスト フィールドに置かれます。

ほとんどすべてが正常に動作しますが、実装できない詳細があり、概念的に困難または不可能にさえ思えます。ユーザーがカーソルを別の入力フィールドに移動するか、ウィンドウの空のポイントをクリックしたときに、提案リストを非表示にしたいと思います。これだけで実現するのは難しくありません。カルバックOnBlurを追加しただけです。しかし、クリックの前にonblur イベントがトリガーされ、 onclick イベントがトリガーされる前に DIV が消えるため、これは項目OnClickの選択を壊します...

ウィンドウ全体に onclick コールバックを実装して、クリックが発生した場所を確認することを考えましたが、これは少しぎこちなく、ゆがんでいるようです。誰かがより良いアイデアを持っていますか? ありがとう！

4

4 に答える 4

2

私は同じ問題に取り組んでいて、次の解決策を思いつきました。オートサジェストリストは、IEでも機能するドキュメントの非表示のonclickになりました（window.onclickはIEでは機能しません）。

document.onclick = function(ev) 
{
    this.hideAutosuggestListDiv();
};

this.hideAutosuggestListDiv = function()
{
    this.div.style.display = 'none';
};
于 2012-10-17T07:21:28.750 に答える
1

私は同様の問題を抱えていましたが、少し異なる解決策を思いつきました：

document.onclick = closeSuggest;
function closeSuggest() {
  document.getElementById('suggestions').style.display = "none";
}

function catchTAB(event) {
  if(event.keyCode ==9) {
    closeSuggest();
    document.getElementById('ELEMENT').focus(); //the element that is currently focused
  }
}

お役に立てれば

于 2011-06-22T05:18:58.013 に答える
0

私は現在、同じ問題を解決しようとしています。

部分的な解決策:

関数を使用して、autosuggest DIV をクリアする前に数分の 1 秒待機します

function pause(milliseconds) {
        var dt = new Date();
        while ((new Date()) - dt <= milliseconds) {  }
}

onBlur="pause(500);clearAutosuggestBox()"

ただし、このソリューションは洗練されたものではなく、すべてのブラウザーで機能するとは限りません。

人気のあるオートサジェスト ボックスのいくつかを見てみると、外側をクリックするとオートサジェスト情報が消えてしまうというものは見当たりませんでした。むしろ、通常はタイムアウトして消えてしまいます。

幸運を祈ります。

于 2011-05-05T19:07:19.533 に答える