2012-02-04 8 views
3

Facebookオートコンプリートのような名前と顔を表示するオートコンプリート機能を実装する必要があります。
この投稿ではJquery UI autocomplete - images IN the results overlay, not outside like the demoとその投稿にあるデモでhttp://jsfiddle.net/K5q5U/私はこれを行うための優れた方法を見つけました。
デモでは、ユーザーの検索にStackOverflowのAPIを使用し、その左側にアバターを表示します。 入力フィールドが提示されたとき、私はいくつかの入力フィールドにそれを変更しようとしたときに
が、問題は、それがうまく機能しているということですが、唯一、
のみ最初のフィールドは、画像+テキスト、画像から無視され、第2フィールドを表示し、オートコンプリートテキストのみが表示されます。 (私は、データベースからの入力フィールドを取得し、私は高度のフィールドの数である今何いけない)ここJQueryを使って複数のフィールドを含むテキストを自動完成

は、私がどのように私に言うことができる私は

<input class="auto" type="text" /> 
<input class="auto" type="text" /> 

$(document).ready(function() { 
    $(".auto").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "http://api.stackoverflow.com/1.1/users", 
       data: { 
        filter: request.term, 
        pagesize: 10 
       }, 
       jsonp: "jsonp", 
       dataType: "jsonp", 
       success: function(data) { 
        response($.map(data.users, function(el, index) { 
         return { 
          value: el.display_name, 
          avatar: "http://www.gravatar.com/avatar/" + 
           el.email_hash 
         }; 
        })); 
       } 
      }); 
     } 
    }).data("autocomplete")._renderItem = function (ul, item) { 
     return $("<li />") 
      .data("item.autocomplete", item) 
      .append("<a><img src='" + item.avatar + "' />" + item.value + "</a>") 
      .appendTo(ul); 
    };  
}); 

任意のヘルプを使用するコードですそれを調整することができますので、カスタム画像+テキストオートコンプリートはいくつかのフィールドに表示されます非常に感謝されます。

答えて

3

多分それはバグです。この回避策を試してください:

$(".auto").each(function() { 

    $(this).autocomplete({  
    // put here remaining code 


}); 
+0

ありがとう、それは問題を解決しました:) –

+0

あなたは私の日を作ってくれてありがとう – ronnieonrails

関連する問題