0

jqueryでオートコンプリートのカテゴリバージョンを実装しようとしています。

これは、再作成してビューに渡す必要がある配列のタイプです。

var data = [
  { label: "anders", category: "" },
  { label: "andreas", category: "" },
  { label: "antal", category: "" },
  { label: "annhhx10", category: "Products" },
  { label: "annk K12", category: "Products" },
  { label: "annttop C13", category: "Products" },
  { label: "anders andersson", category: "People" },
  { label: "andreas andersson", category: "People" },
  { label: "andreas johnson", category: "People" }
];

現在、コントローラーはデータベースからすべての食品を取得し、元の配列内のオブジェクトから 1 つの属性のみを含む新しい配列を作成しました。

この新しく作成された配列で複数の属性を取得する必要があります...

私のコントローラーでは次のようになります。

  @foods = Food.order(:name).where("name like ?", "%#{params[:term]}%")
  render json: @foods.map(&:name) 

このコードは、各食品オブジェクトの name 属性のみを送信します。jquerys catcomplete を機能させるには、名前とタイプの両方を送信する必要があります。

これどうやってするの?

結果を確認するために、irbで次のいくつかを使用してみました(@ obvなし):

@foods.map(&:name) is the same as @foods.map do {|t| t.name}

@foods.map do |t|
    t.name
    t.type
end

@foods.collect do |t|

@foods.each_slice(2).map {|name, type| Array.new(name, type)}

@foods.each_slice(2).map {|n, t| n.name, t.type }

@foods.map do |t|
   @foods.map do |i|
     i.name
   end
   @foods.map do |p|
     p.name
   end
end

おそらく他にも数十のバリエーションがあります...

配列を渡す方法は次のとおりです。

意見:

 <%= text_field_tag 'search_food_text_field', nil, data: { catcomplete_source: search_foods_path } %>  

Foods_Controller

def search
  @foods = Food.order(:name).where("name like ?", "%#{params[:term]}%")
  render json: @foods.map do |food|
    {name: food.name, type: food.type }
  end
end   

food.js

$(function() {

  $( "#search_food_text_field" ).catcomplete({
    source: $("#search_food_text_field").data('catcomplete-source')
  });

});  

助けていただければ幸いです。ありがとう

4

3 に答える 3