jQuery自动完成：以不同方式显示某些对象？

Question

我在Rails应用上运行ruby，我使用jQuery在窗体中显示一些自动填充建议。自动填充建议来自两个不同的阵列，我将它们合并为一个，然后显示。

现在，问题是我需要以不同于另一个文件的结果显示一个文件的结果。我该怎么做呢？也就是说，他们都将在同一个自动完成框，而是从一个结果可能有不同的字体，颜色等

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只是呈现一个JSON对象，它是两个级联阵列添加到URL /locations/autocomplete.js，其中autocomplete.js呈现。

我意识到我可能需要修改我的控制器返回2个独立的JSON对象，一个add，一个用于location。我可以做到这一点，但我不知道如何在最终的自动完成中将它们合并在一起，以及如何以不同方式格式化查询。

我对javascript/jquery非常缺乏经验，所以我会很感激一个解释这些组件的答案，即使您将所需的更改覆盖到Rails应用程序上。

这就是它归结为：

当我查看HTML的自动完成框，每个自动完成的项目如下：

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

我只需要加除了“ui-menu-item”和“ui-corner-all”之外的另一个类来自从一个JSON获得的结果，这将不会出现在从另一个获得的结果中。

现在，我看here，它可以通过修改.renderItem功能添加一个额外的类，但我怎么在一定的JSON对象（JS方法）将此每个元素，或将此运用到每一个元素事先（通过铁轨）红宝石阵列？

Answer 1

对于必须使用_renderItem函数，您是正确的。使用此方法，只要包含小部件所需的数据，就可以将任何您想要的课程应用到li或基础a。

我只是简单地从您的ruby代码发送另一个变量（对不起，不熟悉ruby），它指定这是否是地址（或者您想要改变格式的任何属性）。

然后，你会写_renderItem功能是这样的：

$("#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); 

}; 

假设你传下来的isAddress值的数组中的是一个地址的对象。请记住，只要窗口小部件具有标签或值字段（或两者），就可以传递您想要的任何数据。

下面是与本地数据源更完整的示例：http://jsfiddle.net/andrewwhitaker/tW5zE/