ruby - 如何在 Rails 中的 jQuery 自动完成结果中显示 HTML

Question

我正在为 Rails 中的 jQuery UI 自动完成填充一组结果：

<%= text_field_tag('user', "", :placeholder => 'Enter a user...', class: "users",
                   data: {autocomplete_source: User.order(:lastname, :firstname).map { |u| {:label => getLabel(u.firstname, u.lastname).html_safe, :id => u.id} }}) %>

我正在尝试在标签中显示 HTML，例如将文本加粗，并最终在每一行中显示一个图像。

  def getLabel(firstname, lastname)
   "<b>" + firstname + " " + lastname + "</b>"
  end

这始终在结果中呈现为纯文本：

<b>John Smith</b> 

将标签呈现为 HTML 的最佳方法是什么？任何帮助表示赞赏。

编辑：

  $('.users').autocomplete
    source: $('.users').data('autocomplete-source')
    select: (event, ui) ->
      $( ".users" ).val( ui.item.value );
      $( "#user_id" ).val( ui.item.id );
      $( "#select_user" ).submit();

HTML：

<input class="users" data-autocomplete-source="[{&quot;label&quot;:&quot;\u003Cb\u003EJohn Smith\u003C/b\u003E&quot;,&quot;id&quot;:4}]" id="user" name="user" placeholder="Enter a user..." type="text" value="" />

Answer 1

在此示例的帮助下弄清楚了这一点：http: //jqueryui.com/autocomplete/#custom-data

$(".users").autocomplete(
  dataType: "json"
  source: $('.users').data('autocomplete-source')
  minLength: 2
  select: (event, ui) ->
    $(".users").val(ui.item.value);
    $("#user_id").val(ui.item.id);
    $("#select_user").submit();
).data("ui-autocomplete")._renderItem = (ul, item) ->
  $("<li></li>").data("item.autocomplete", item).append("<a>" + "<img src='" + item.img + "'>" + item.label + "</a>").appendTo( ul )

将图像添加到结果集中：

{:label => u.firstname + " " + u.lastname, :id => u.id, :img => u.avatar_url}

这使我可以输出图像，可以在 js 中操作任何其他 html。

Answer 2

除非您将字符串声明为 HTML 安全的，否则它将始终为您转义。这是一种安全机制。

最直接的方法是html_safe在标签上使用：

def get_label(firstname, lastname)
  [ '<b>', h([ firstname, lastname ].join(' '))), '</b>' ].join('').html_safe
end

更好的是，您可以使用辅助方法为您构造标签：

def get_label(firstname, lastname)
  content_tag('b', [ firstname, lastname ].join(' ')).html_safe
end

第二种方法更好，因为您不会冒意外声明 name 的风险html_safe。

Answer 3

更改自动完成的 css 以显示您想要的输入。

ul.ui-autocomplete {
  font-weight:bold;
  /* other changes ... */
}

这样您就不必在输入字符串中添加任何额外的 html。