Добавить радиообъекты в поле автозаполнения

Question

У меня есть список продуктов для автозаполнения и разные картинки для них. Как я могу поместить радиаторы с картинками под каждый продукт? Это мой код для автозаполнения до сих пор

function create_rbuttons(item){ 
     var str = $(); 
     if(item.PicId !=null){ 
      for(i=0;i<item.PicId.length;i++){ 
       debugger; 
       str = str + $('<input type="radio" name="rbtnCount" />'); 

      } 
     } 
     return str; 
    } 


    $('.SliderBox').on("focus",function() { 
     $(this).autocomplete({ 
      delay: 500, 
      minLength: @(Model.SearchTermMinimumLength.ToString()), 
      source: '@(Url.RouteUrl("ProductSearch"))', 
      select: function(event, ui) { 
       $(this).val(ui.item.label); 
       var box_id = $(this).closest('.search-box').attr('value'); 
       $('.Picture'+box_id+' img').attr('src',ui.item.productpictureurl).width(100).height(100); 
       $('#Picture'+box_id+'Id').attr('value',ui.item.PicId[0]) 
       $('.Text'+box_id+' input').attr('value',ui.item.label) 
       $('.Link'+box_id+' input').attr('value',ui.item.producturl); 
       return false; 
      } 
     }) 
       .data("ui-autocomplete")._renderItem = function(ul, item) { 
        var t = item.label; 
        return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append("<a>@(true ? Html.Raw("<img src='\" + item.UrlsArr[0] + \"'>") : null)" + t + "</a>") 
        .append("<a>" + t + "</a>") 
        .append(create_rbuttons(item)) 
       .appendTo(ul); 
       }; 

PicId является массивом, где я храню идентификатор картинок. UrlsArr - где я держу путь к ним

Answer 1

Попробуйте

function create_rbuttons(item){ 
     if(item.PicId !=null){ 
      for(i=0;i<item.PicId.length;i++){ 
       var radioBtn = $('<input type="radio" name="rbtnCount" />'); 
       radioBtn.appendTo(ul); 
        } 
     } 
    } 

Answer 2

Я пытался что-то. Радиокнопка на самом деле ничего не делает, она просто сидит там. Но вы можете увидеть значок.

Смотрите, если это помогает

index.php

<style> 
img.icon { 
    height: 20px; 
} 
.highlight { 
    color: red; 
} 
</style> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    var searchbox = $("#search"); 
    searchbox.autocomplete({ 
     source: "autocomplete.php", 
     select: function (event, ui) { 
     } 
    }).data("ui-autocomplete")._renderItem = function (ul, item) { 
    var li_item = highlight(searchbox.val(), item.value); // highlight 
    if(li_item.length) { 
     return $('<li></li>') 
     .data('item.autocomplete', item) 
     .append(' <input type="radio" name="rbtnCount"> <img class="icon" src="' + item.icon + '"> ' + li_item) 
     .appendTo(ul); 
    } 
    else { 
     return $('<li></li>'); 
    } 
    }; 
    // based on @see http://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript 
    function highlight(needle, haystack) { 
    var result = haystack; 
    var index = haystack.toLowerCase().indexOf(needle.toLowerCase()); 
    if (index >= 0) { 
     result = haystack.substring(0, index) + "<span class='highlight'>" + haystack.substring(index, index+needle.length) + "</span>" + haystack.substring(index + needle.length); 
    } 
    else { 
     // no match 
     return ''; 
    } 
    return result; 
    } 
}); 
</script> 
<input id="search"> 

autocomplete.php

[ 
{"value": "ActionScript", "icon": "http://blog.istorm.ca/wp-content/uploads/2011/05/64px-ActionScript_icon.png"}, 
{"value": "Boostrap", "icon": "http://qph.is.quoracdn.net/main-thumb-t-407834-50-bcwisowdvdkeethoagubojbfeljzwjwy.jpeg"}, 
{"value": "C++", "icon": "http://imag.malavida.com/mvimgbig/download-s/turbo-c-4955-0.jpg"}, 
{"value": "Jquery", "icon": "https://pbs.twimg.com/profile_images/59268975/jquery_avatar_normal.png"}, 
{"value": "Java", "icon": "https://pbs.twimg.com/profile_images/426420605945004032/K85ZWV2F_normal.png"}, 
{"value": "JavaScript", "icon": "http://www.kalmstrom.com/images/logos/Icons/JavaScript128.png"} 
]