Add radiobuttons to autocomplete field

Question

I've got list of products for my autocomplete and different pictures for them. How can I put the radiobuttons with pictures under each product? This is my code for autocomplete so far

  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 is an array, where I keep id of pictures. UrlsArr — where I keep paths to them

score 1 · Answer 1 · answered Jul 07 '15 at 07:58

I tried something. The radio button doesn't really do anything, it just sits there. But you can see the icon.

See if it helps

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"}
]

score 0 · Answer 2 · answered Jul 07 '15 at 06:55

Try this

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);
                    }
        }
    }

Add radiobuttons to autocomplete field

2 Answers2