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

【问题标题】：How to display HTML in jQuery autocomplete results in Rails如何在 Rails 中的 jQuery 自动完成结果中显示 HTML
【发布时间】：2013-07-23 17:53:07
【问题描述】：

我正在为 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="" />

【问题讨论】：

标签： ruby jquery-ui jquery-autocomplete jquery-ui-autocomplete ruby-on-rails-4

【解决方案1】：

除非您声明您的字符串是 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

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

【讨论】：

嗯。这两种解决方案仍然为我呈现纯文本。
我已经调整了答案以尝试不同的方法。
感谢您的帮助。几乎就像它被强制作为纯文本一样，因为它位于输入字段的“数据自动完成源”属性中。我已经更新了关于它如何呈现的问题。这应该在js端转换回html吗？对这个很茫然。

【解决方案2】：

在此示例的帮助下解决了这个问题：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}

这允许我输出图像，任何其他的 html 都可以在 js 中进行操作。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：