javascript - 将单选按钮添加到自动完成字段

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 是一个数组，我在其中保存图片的 id。 UrlsArr — 我保存它们的路径的地方

Answer 1

我尝试了一些东西。单选按钮实际上并没有做任何事情，它只是坐在那里。 但您可以看到该图标。

看看是否有帮助

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

自动完成.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"}
]