1

2 つのテキスト入力があり、どちらもオートコンプリートを実行する必要があります。このサイトは Bootstrap と « typeahead » コンポーネントを使用しています。私はこのHTMLを持っています:

<input type="text" class="js_typeahead" data-role="artist" />
<input type="text" class="js_typeahead" data-role="location" />

データベースから取得する必要があるデータの種類を決定するために、« data-role » 属性 ($_POST インデックスとして Ajax コントローラーに送信される) を使用しています。

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

var myTypeahead = $('input.js_typeahead').typeahead({
 source: function(query, process){
 var data_role;
  data_role = myTypeahead.attr('data-role');
  return $.post('/ajax/typeahead', { query:query,data_role:data_role },function(data){
    return process(data.options);
  }); } });

PHP を使用して、何$_POST['data-role']が含まれているかを確認し、MySQL クエリを実行します (この場合は、アーティストのリストまたは場所のリストに対するクエリ)。

しかし問題は、2 番目の「typeahead」が最初のもの (アーティストのリスト) と同じ値を返すことです。リスナーがオブジェクト« myTypeahead »にアタッチされているためだと思います。このようにして、使用される「データロール」属性は常に同じになります。

次のようなものを使用して修正できると思います: data_role = $(this).attr('data-role'); しかし、もちろん、これは別のスコープであるため、機能しません。

多分私はそれをすべて間違っているかもしれませんが、少なくともあなたの人々は私にヒントを与えることができます. これがすでに議論されている場合は申し訳ありませんが、実際に検索しましたが、成功しませんでした。

前もって感謝します、クレム(フランスから、私の英語でごめんなさい)

4

1 に答える 1

1

この場合、要素を反復処理する必要があります。getter メソッドは、最初に選択された要素の値のみを返します。

$('input.js_typeahead').each(function(){
    var myTypeahead = $(this).typeahead({
        source: function(query, process){
            var data_role;
            data_role = myTypeahead.attr('data-role');
            return $.post('/ajax/typeahead', { 
                query:query,data_role:data_role 
            },function(data){
                process(data.options);
            }); 
     } 
});
于 2012-11-15T16:57:47.423 に答える