Javascript 如何使用Rails中的返回json图像链接将用户图像添加到其名称中？

总之，我希望能够添加用户图像旁边的名字时，它被发现或搜索

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

我想要这样的东西：

'自动完成'> 我有ID:form控件，：ID=>decisionmaker，'databehavior'=>autocomplete'}%>

用户图像：表单控件，：id=>User\u 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);
                });


            }
        });
    }
});

---

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

创建一个输入字段，一旦更改就开始搜索，搜索完成后，就像添加选项标记一样。可以在ul标记中附加li元素。在这里，你需要一些css来使它看起来很好

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

请选中此自定义选择框以供参考

---

也许您必须使用Select2库，它是一个很好的库。请访问以查看您正在查找的内容。

您可以再详细说明一下吗？添加了一个JSFIDLE链接，请查看。您将了解如何创建自定义选择框