2016-05-20 30 views
0

jQuery UIを使用して、SQLデータベースに基づいて提案を自動補完します。これは完全に動作しますが、私は(Googleのように)入力を現在選択/フォーカスされた要素(li)で自動的に埋めたいと思っています。自動入力フォーカス要素jQuery ui(オートコンプリート)

input name="movie" type="text" id="titles" class="input-field-primary" placeholder="Test" method="GET" autofocus> 

    $(function() { 
     $('#titles').autocomplete({ 
      source: 'includes/search.php', 
      minLength: 3, 
      open: function(event, ui) { 
       $('.ui-autocomplete').off('menufocus hover mouseover mouseenter'); 
       $(window).resize(function() { 
        $(".ui-autocomplete").css('display', 'none'); 
    }); 
      } 


     }); 
    }) 
+0

あなたはオートコンプリートが持っている 'SELECT'方法を見たことがありますか?選択:機能(イベント、UI){ \t \t \t \t \tアラート( "選択"); http://api.jqueryui.com/autocomplete/#event-select –

+0

Iは、次の試み \t \t \t} ただし、これは、入力をクリックするか実際にアイテムを選択した後にのみ警告します。私は提案の1つがユーザーによって集中されているときに何かをしたいと思っています。 – Stefan1993

+0

'open'メソッドを削除し、' focus'イベントを追加してください。それが動作します。私はあなたのためのサンプルを作成しましたhttps://jsfiddle.net/8egw1m8w/ –

答えて

0

あなたはautocompletefocusイベントを使用することができます。

私は以下のsourceを嘲笑している:

$(function() { 
 
    $('#titles').autocomplete({ 
 
    source: ['aaaa', 'bbbb'], // replace this with your AJAX call 
 
    minLength: 3, 
 

 
    select: function(event, ui) { 
 
     $("#titles").val(ui.value) 
 
    }, 
 

 
    focus: function(event, ui) { 
 
     console.log(ui) 
 
     $("#titles").val(ui.value) 
 
    } 
 

 

 
    }); 
 
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
<input name="movie" type="text" id="titles" class="input-field-primary" placeholder="Test" method="GET" autofocus>

+0

の下の作業例を提供しました。私は今、唯一の問題は、自動機能がiOSデバイス上で正常に動作するために、元の機能のオープンな部分が必要なことです。これがそこにない場合、それを入力フィールドに表示するための提案を2回クリックする必要があります。しかし、単に開いた部分を追加するだけで、選択とフォーカスが再び機能しなくなるようです。何か案は? – Stefan1993

関連する問題