0

私はこの単純なシナリオを持っています（この質問のために単純化されています）：

<input type="text" id="input">
<div id="autocomplete">.. some links..</div>

<script>
  $('#input').bind('focus', function(){
    $('#autocomplete').show();
  }).bind('blur', function(){
    $('#autocomplete').hide();
  });
</script>

私が達成したいのはこれです：

  1. ユーザーがテキスト入力をクリックすると、オートコンプリートが表示されます。
  2. ユーザーがオートコンプリートDIV内の何かをクリックしても、表示されたままになります
  3. ユーザーが入力以外の場所をクリックしてオートコンプリートすると、オートコンプリートは消えます。

どうすればこれを達成できますか？特に2点目は簡単に達成できるはずなので、答えを探しています。

よろしくお願いします。

4

2 に答える 2

1

私が間違っている場合は訂正してください。ただし、あなたのコードは要件 #1 と #3 では機能しますが、#2 では機能しないと思います。

ユーザーがオートコンプリート DIV 内の何かをクリックすると、表示されたままになります

これは、div をクリックすると入力フィールドがフォーカスを失うため、ぼかしコードによって div がすぐに非表示になるためです。blurこれは、div を非表示にするためにイベントを使用できないことを意味します。clickon にバインドできdocumentます。ハンドラー内から、div を非表示にするかどうかを確認する必要があります。

$(document).click(function(e){
    var inputFocused = $('#input').is(':focus');
    var clickedInsideAcDiv = $(e.target).closest('#autocomplete').length > 0;
    if(!inputFocused && !clickedInsideAcDiv) {
        $('#autocomplete').hide();
    }
});

これが実際のページのすべてを説明するかどうかはわかりませんが、アイデアが明確であることを願っています.

于 2012-05-07T17:00:32.147 に答える
0

自分ですべてを一緒にハックするのはクールだと思いますが、このjQueryオートコンプリートプラグインを確認することをお勧めします：http：//jqueryui.com/demos/autocomplete/

アップデート

<script>
  $('#input').bind('focus', function() {
    $('#autocomplete').position($(this).position()); //Adjust this accordingly depending on where you want the autocomplete div to show up.
    $('#autocomplete').show();
  }).bind('blur', function(){
    $('#autocomplete').hide();
  });
</script>

CSS：

<PARENT_OF_#autocomplete> {
    position: relative; /* Anything other than static or default one */
} 

#autocomplete {
    position: absolute;
}
于 2012-05-07T16:21:02.407 に答える