时间戳

首页 > 解决方案 > 如何使用 Rails 中的返回 json 图像链接将用户图像添加到他们的名称中？

javascript - 如何使用 Rails 中的返回 json 图像链接将用户图像添加到他们的名称中？

问题描述

所有，我希望能够在找到或搜索时将用户图像添加到他们的名字旁边。

用户输入搜索的搜索字段，当他们单击它时，结果存储在选择字段中：我有另一个 user_image 选择字段，我可以看到图像的 URL，但是，我不知道如何在名称旁边显示此图像，甚至显示图像。我知道使用 image_tag 但如何在选择选项中执行此操作？...我更喜欢它显示在同一个决策者字段中，我可以在那里返回值，但我不确定如何添加图像标签以从提供的图像 URL 中查看图像...

在此处输入图像描述

我想要这样的东西： 在此处输入图像描述

'自动完成'%>

我有 ID：<%= f.select :decisionmaker, {}, {}, {:class => "form-control", :id => "decisionmaker" , 'data-behavior' => 'autocomplete'} %>

用户图像：<%= f.select :decisionmaker, {}, {}, {:class => "form-control", :id => "user_imag" , 'data-behavior' => 'autocomplete'}%>

Javascript：

$(document).on('change', '#createcampaign_decisionmaker', function() {
    var input_state = $(this);
    console.log("khemlall starts")
    var decisionmaker = $("#decisionmaker");
    var user_image= $("#user_image")
    if ($(this).val() == "") {
        decisionmaker.html("");
    } else {
      // var key=$("#createcampaign_decisionmaker").val();
        var inputvalue = input_state.val();
        inputvalue = inputvalue.replace(" ", "&");
        console.log(inputvalue)
        var searchurl = '/search/?q='+ inputvalue;
        //$.getJSON('/search/', function(data) {



        $.getJSON(searchurl, function(data) {
            var results = data;

            var opt = '<option value="" selected="">list of user</option>';
            var imageopt  = '<option value="" selected="">list of user</option>';
            if (results.length == 0) {

            } else {
                    //$.each(data.users, function(index, value)
                    //{console.log("index" + index + ": " + value)})

                 $.each(results.users, function(index, value) {

                  // console.log("image url" + value.image.url)
                    opt += '<option>' + value.first_name + " " +  value.last_name + '</option>';
                    imageopt += '<option>'+ value.image.url  + '</option>';
                    user_image.html(imageopt)
                    decisionmaker.html(opt);
                });


            }
        });
    }
});

标签： javascriptruby-on-railsruby-on-rails-4

解决方案

您必须为此创建一个自定义选择框。

创建一个输入字段并 onChange 开始搜索，搜索完成后就像添加选项标签一样。您可以在 ul 标记中附加 li 元素。在这里，您将需要一些 css 使它看起来不错。

<ul>
    <li>
        <span>image tag...</span>
        User name
    </li>
    <li>
        <span>image tag</span>
        User name
    </li>
</ul>

作为参考，请查看（自定义选择框） https://jsfiddle.net/fhpf6tpg/9/

推荐阅读