Display user

Hi Everyone,

I'm trying to display a users profile image, along with their username in an autocomplete dropdown.

The autocomplete functionality works fine, I'm just having trouble displaying the actual image in the dropdown. I get the image URL instead of the image.

I'm using carrierwave for image uploading and jQuery-UI for autocomplete.

users_controller.rb

def index
  @users = User.order(:username).where("username like ?", "%#{params[:term]}%")
  render json: @users.map{ |user| "#{user.username} - #{user.user_photo}"}
end

In my index action, for some reason "#{user.user_photo}" provides the link to the image, not the actual image.
I've also tried view_context.image_tag("#{user.user_photo.url}"), but that returns the actual HTML img tags and all.

The form:

<% if policy(@list).add_collaborators? %>
  <h3>Add Collaborator</h3>
  <%= form_for [@list, @collaboration] do |f| %>
    <%= label_tag "Enter collaborator username" %>
    <%= text_field_tag :username, nil, data: {users_source: users_path} %>
    <%= f.submit "Add collaborator" %>
  <% end %>
<% end %>

autocomplete.js.coffee:

jQuery ->
  $('#username').autocomplete
    source: $('#username').data('users-source')

This is what I get. I want the image, not the URL to the image.

I have this posted on stackoverflow as well, but I'm not getting much traction there so I wanted to post it here too.

Thanks for any help!

Hey Nick,

I believe you'll need to actually modify your autocomplete code to render HTML rather than the standard text you pass it.

Here's an example of how you'd include an image in the jQuery autocomplete library: http://stackoverflow.com/a/7896744/277994

Basically you just have to override the default rendering code in the JS so that it can display the image tag rather than the text.

If it helps this code works for me. The image is a Facebook avatar, but I don't think it makes a difference.

$(function() {
  return $('[data-behavior="autocomplete"]').atwho({
    displayTpl: "<li><img class='img-circle' src='${image}' height='20' width='20'/> ${name} </li>",
    at: "@",
    'data': "/meals.json"
  });
});

Thanks Chris and Isaac, I appreciate your help!

Chris, the resource you pointed me to fixed my drop down problem. The problem that I'm having now is, when I select a user the img tags and url to the photo shows up in the input box.

I tried just splitting up my string and selecting the first part of the entry in the form, but no luck.

jQuery ->
  $('#username').autocomplete(
    source: $('#username').data('users-source')
   ///Here, not sure if I'm even doing this right
    select: (event, ui) ->
        $('#username').on 'autocompleteselect', (event, ui) ->
           $('#username').val ui.item.value.split(' ')[0]
      return
  ).data('uiAutocomplete')._renderItem = (ul, item) ->
    $('<li />').data('item.autocomplete', item).append(item.value).appendTo ul

this is my JSON

["Nickiam7 \u003cimg src=\"https://lisst-dev.s3.amazonaws.com/uploads/user/user_photo/1/thumb_stay_puft.jpg\" alt=\"Thumb stay puft\" /\u003e","jsmith \u003cimg src=\"\" /\u003e","the Turd \u003cimg src=\"https://lisst-dev.s3.amazonaws.com/uploads/user/user_photo/2/thumb_new_me.jpg\" alt=\"Thumb new me\" /\u003e"]

I also tried using jQuery in the actual view to target the form and remove everything after the first part of the value, but I couldn't get that to work either!

Isaac, I'm hoping someone might be able to help me out with this before I try your solution. I appreciate your help!

Thanks again to anyone who can help me!