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

Posted 2023-05-09

【中文标题】jQuery自动完成：以不同方式显示某些对象？

【英文标题】：jQuery autocomplete: Display certain objects differently?

【发布时间】：2011-10-24 20:44:27

【问题描述】：

我正在运行一个 ruby​​ on rails 应用程序，并且我正在使用 jQuery 在表单中显示一些自动完成建议。自动完成建议来自 2 个不同的数组，我将它们合并为一个，然后显示。

现在，问题是我需要以与来自另一个文件的结果不同的方式显示来自一个文件的结果。我该怎么做呢？也就是说，它们都将在同一个自动完成框中，但其中的结果可能有不同的字体、颜色等（单独的 CSS 挂钩？）

autocomplete.js：

$(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 方法）中的每个元素，或者将它应用于预先（通过rails）在ruby数组中的每个元素？

【参考方案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/

【讨论】：

对不起，我对 JS 了解不多。我将在哪里定义 JS 中的 isAddress? 函数，如果一个元素在某个 JSON 对象中，我如何让它返回 true，如果它是另一个 JSON 对象，我如何让它返回？这样我就可以将特殊地址作为单独的 JSON 返回，然后以不同的方式格式化它们。

您将发送isAddress 连同您已经从服务器端代码发回的数据。在构建地址数组时，请包含一个始终适用于地址的 isAddress 属性。对于其他列表，您可以完全省略它。