jQueryオートコンプリート：特定のオブジェクトを別の方法で表示しますか？

Question

私はRubyアプリケーションでRubyを実行しています。私はjQueryを使ってフォームにいくつかのオートコンプリート候補を表示しています。オートコンプリートの提案は、2つの異なる配列から取得し、1つにマージして表示します。

ここで問題となるのは、あるファイルの結果を別のファイルの結果と別の方法で表示する必要があることです。これはどうすればいいですか？すなわち、それらはすべて同じオートコンプリートボックスになりますが、1からの結果が異なるなどのフォント、色、持っていること、である

autocomplete.js（個別のCSSフックを？）：

$(function() { 
    $('.autocomplete_field').autocomplete({ 
    source: '/locations/autocomplete.js' 
    }); 
}); 

locations_controller.rb：あなたが見ることができるように

def autocomplete 
    respond_to do |format| 
     format.js do 
     client = GooglePlacesAutocomplete::Client.new(:api_key => "mykey") 
     locations = client.autocomplete(:input => params[:term], :lat => "x", :lng => "y", :radius => "25000") 
     add = Location.all.map { |l| { :label => l.address, :value => l.address } } 
     locations = locations.predictions.map { |l| {:label => l.description, :value => l.description} } 
     final = add + locations 
     render :json => final 
     end 
    end 
    end 

、locations_controllerは単にautocomplete.jsをレンダリングするURL /locations/autocomplete.js、には2つの連結配列であるJSONオブジェクトをレンダリングします。

私は2つの別々のJSONオブジェクト、addに1つ、およびlocationための1つを返すために、私のコントローラを変更する必要があり実現しています。私はこれを行うことができますが、最後のオートコンプリートでそれらをどのようにマージするのか、それらのクエリを異なる方法でフォーマットする方法はわかりません。

私はjavascript/jqueryで非常に慣れていないので、Railsアプリケーションの必要な変更を光っていても、これらのコンポーネントについてうまく説明する回答をいただければ幸いです。

これは、それが沸くものです：

私はオートコンプリートボックス、ためHTMLを表示すると、次のようにそれぞれのオートコンプリートの項目は次のとおりです。

<li class="ui-menu-item" role="menuitem"> 
<a class="ui-corner-all" tabindex="-1">(autocomplete suggestion)</a> 
</li> 

私は単に追加する必要があります1つのJSONから得られた結果に "ui-menu-item"と "ui-corner-all"の他に追加のクラスがあり、他のJSONから取得した結果には含まれません。

ここで、.renderItem関数を変更して追加のクラスを追加することは可能ですが、これを特定のJSONオブジェクト（jsアプローチ）のすべての要素に適用するにはどうすればよいですか？事前に（レールを介して）ルビー配列？

Answer 1

_renderItem機能を使用する必要はありません。このメソッドを使用すると、ウィジェットが期待するデータを含める限り、任意のクラスをliまたはその下にあるaに適用できます。

これはアドレスかどうか（または書式を変更するために分岐するプロパティ）を指定するルビコードから別の変数を送信するだけです（ごめんなさい、ルビーに精通していない）。あなたがアドレスされているあなたの配列のそれらのオブジェクトのためのisAddress値を伝承していると仮定すると、

$("#auto").autocomplete({ 
    source: source 
}).data("autocomplete")._renderItem = function(ul, item) { 
    var listItem = $("<li></li>") 
     .data("item.autocomplete", item) 
     .addClass(item.isAddress ? "address" : "landmark"); 

    if (item.isAddress) { 
     listItem.html("<a>" + $.map(item.label.split(","), function(el) { 
      return "<span class='addressline'>" + el + "</span>"; 
     }).join('') + "</a>"); 
    } else { 
     listItem.html("<a>" + item.label + "</a>"); 
    } 

    return listItem.appendTo(ul); 

}; 

：

その後、あなたはこのような_renderItem機能を記述します。ウィジェットがラベルまたは値フィールド（またはその両方）を持っている限り、任意のデータを渡すことができます。ここで

は、ローカル・データ・ソースとのより完全な例です：http://jsfiddle.net/andrewwhitaker/tW5zE/