jqueryオートコンプリート - テキストボックスの下のマウスは、メニューが表示された後の原因の選択

Question

ページの上部にjqueryオートコンプリートのテキストボックスがあります。通常、ユーザーはテキストボックス内をクリックしてフォーカスを移動し、マウスを移動してから入力を開始します。ユーザーがオートコンプリートの下にマウスを移動した場合、マウスの位置は何もしなかったにもかかわらず誤って候補を選択する可能性があります。これが起こり、ユーザーがエンターキーを押すと、オートコンプリートは不用意な選択を使用します。

これは私のオートコンプリートの場所に起因する重大な問題です。これは常に起こり、ユーザーにとっては非常に不満です。私は解決策が必要ですが、私は最初にキー押しイベントを与えるためにオートコンプリートを得ることができません。

http://jsfiddle.net/uqTv9/2/

Answer 1

単にあなたがこのように入力防ぐために、selectイベントを使用することができます。

$('#query').autocomplete({ 
    source: [ 
     "A", 
     "AAA", 
     "AAAAA", 
     "AAAAAAAAA", 
     "AAAAAAAAA", 
     "AAAAAAAAAAA", 
     "AAAAAAAAAAAAAA", 
     "AAAAAAAAAAAAAAAA", 
     "AAAAAAAAAAAAAAAAAA", 
     "AAAAAAAAAAAAAAAAAAAAA", 
     "AAAAAAAAAAAAAAAAAAAAAAAA" 
    ], 
    select: function(e, ui) { 
     if(e.which === 13) { return false; } 
    } 
}); 

JSFIDDLE：http://jsfiddle.net/gurkavcu/xSKPz/1/

Answer 2

以下がハックされ、基本的にはjQueryのスタイリングと選択を否定：

はここに私の例です。検索コールバックを実装し、そこにjQueryのスタイルを削除するためのハックを追加し、マウスが移動したときにハックを削除しました。

DEMO

注：私はまだ入力してキーを試す機会を持っていません。

$('#query').autocomplete({ 
    source: [ 
     "A", 
     "AAA", 
     "AAAAA", 
     "AAAAAAAAA", 
     "AAAAAAAAA", 
     "AAAAAAAAAAA", 
     "AAAAAAAAAAAAAA", 
     "AAAAAAAAAAAAAAAA", 
     "AAAAAAAAAAAAAAAAAA", 
     "AAAAAAAAAAAAAAAAAAAAA", 
     "AAAAAAAAAAAAAAAAAAAAAAAA" 
     ], 
    search: function(event, ui) { 
     $(document).on('mouseenter', '.ui-menu-item a', function(e) { 
      //Remove jQuery styling and selection. 
      $(this).removeClass('ui-state-hover'); 
      this.id = ''; 
      e.preventDefault(); 
     }).one('mousemove', '.ui-menu-item a', function(e) { 
      //implement mouse move once if moved inside the same li>a 
      $(this).addClass('ui-state-hover'); 
      this.id = 'ui-active-menuitem'; 

      //unbind the mouse event so it works as normal 
      $(document).on('mouseenter', '.ui-autocomplete', function(e) { 
       $(document).off('mouseenter', '.ui-menu-item a'); 
      }); 
     }); 
    } 
}); 
$('#query').keypress(function(ev) { 
    if (ev.keyCode == 13) { 
     alert('query: ' + $(this).val()); 
     return (false); 
    } 
}); 

Answer 3

このスレッドは既に閉じられているが、私は同様の問題と上記の解決策を持っていたので、私のために働かなかった、私はこの解決策を共有したいと思います。

結果リストを開いた後の最初の要素に焦点を当てることで構成されます。

$('.selector').autocomplete({ 
    open: function() { 
     var w = $(this).autocomplete('widget'); 
     setTimeout(function() { $('li:first', w).mouseover(); }, 50); 
    } 
}); 

私の問題は、あなたがテキストボックスの下にマウスポインタを離れるときに、オートコンプリートがマウスポインタと最初ではないの下の項目を選択し、検索の入力を開始しました。