Jquery 自动完成 _renderItem 不起作用

Question

_renderItem 根本没有执行，尝试使用 console.log 也没有打印任何消息。尝试使用 'autocomplete'、'ui-autocomplete'、'Autocomplete' 属性没有希望。

另外我无法理解“响应地图功能”的目的，所以禁用它。

$(document).ready(function () {

myVars.shId = $('#dataVar').attr('sh-data');

///// search ////// http://jsbin.com/xavatajiku/edit?js,output
console.log(myVars.shId);
$('#name-list').autocomplete({

        source: function (request, response) {
            $.ajax({
                url: myVars.czbUrl,
                data: { searchText: request.term, maxResults: 10, shopId: myVars.shId },
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    /*response($.map(data, function (item) {
                        console.log(data);
                        return {

                            value: item.product_name,
                            avatar: item.pfimage_thumb,
                            rep: item.product_name,
                            selectedId: item.url
                        };
                    }))*/
                }
            })
        },
        select: function (event, ui) {

                             alert(ui.item ? ("You picked '" + ui.item.label)
                                                      : "Nothing selected, input was " + this.value);

            return false;
        }
    }).autocomplete( "instance" )._renderItem = function (ul, item) {
        console.log('test');
        /*var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.pfimage_thumb + '"></div><div class="label"><h3> Reputation:  ' + item.volume + '</h3></div><div class="description">' + item.product_name + '</div></div></a><hr/>';
        return $("<li></li>")
                .data("ui-autocomplete-item", item)
                .append(inner_html)
                .appendTo(ul);*/
    };

HTML：

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<h4>search:<input type="text" id="name-list" /></h4>

Answer 1

一些小的更正，你应该在路上：

示例：https://jsfiddle.net/Twisty/3gm3sfem/

JavaScript

$(function() {
  var myData = [{
    product_name: "Name 1",
    pfimage_thumb: "thumb1.jpg",
    url: "url1"
  }, {
    product_name: "Name 2",
    pfimage_thumb: "thumb2.jpg",
    url: "url2"
  }, {
    product_name: "Name 3",
    pfimage_thumb: "thumb3.jpg",
    url: "url3"
  }];
  $('#name-list').autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "/echo/json/",
        data: {
          json: JSON.stringify(myData)
        },
        dataType: "json",
        type: "POST",
        success: function(data) {
          console.log(data);
          response(data);
        }
      })
    },
    select: function(event, ui) {
      alert(ui.item ? ("You picked '" + ui.item.label) : "Nothing selected, input was " + this.value);
      return false;
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    console.log('test');
    var item = $('<div class="list_item_container"><div class="image"><img src="' + item.pfimage_thumb + '"></div><div class="label"><h3> Reputation:  ' + item.volume + '</h3></div><div class="description">' + item.product_name + '</div></div>')
    return $("<li>").append(item).appendTo(ul);
  };
});

如果您的数据返回，请将其传递给response() 以确保menmu 被渲染。您不需要<a>，因为select 会以任何一种方式被解雇。

Answer 2

我想设置 _renderItem 和 _renderMenu，所以我遇到了以下示例：

$(document).ready(function() {
        var products = $(".products").clone();
        $('#search-box').autocomplete({
            minLength: 1,
            source: function(request, response){
                $.ajax({
                    url:"../ajax-search.php",
                    dataType:"json",
                    html: true,
                    data:{term:request.term},
                    success: function(data){
                        response(data.slice(0,5));
                    }
                });
            },
            create: function (event,ui){
               $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                return $('<li>')
                    .append("<img src=../images/"+item.Image +" alt='img' />")
                    .append('<a>' + item.Number  + '<br>' + item.Name  + '</a>')
                    .appendTo(ul);
            };
               $(this).data('ui-autocomplete')._renderMenu = function () {
                    this.menu.element.css({
                    width: $('#search-box').width(),
                    border: 'medium solid'
                });

            };
        }
        });

如果找到这个答案here

Answer 3

您需要使用 Jquery 小部件工厂来扩展自动完成对象。这些文章中对此进行了解释：

https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

它是这样工作的：

您可以像这样添加小部件代码：

$.widget(
"custom.superAuto",
$.ui.autocomplete,
{
    _renderMenu : function(ul, items) {
        var self = this;
        ul.append("<div><span style='float:left; width: 50%; border-top:none; color:#949494;font-family:arial;font-size:14px' id='products'>KOSSSS</span></div>");
        $.each(items, function(index, item) {
        self._renderItem(ul.find("#products"),item);
        });
    },
    _renderItem: function (column, item)
    {
        return $("<li style='text-align:left; font-size:12px; height:28px'>")
    }
});

上面的代码扩展了自动完成对象，您可以使用 superAuto 代替，并使用您的自定义逻辑来呈现您的菜单，如下所示：

$(".suggestion-input").superAuto(
                {
                    minLength : 2,
                    source : function(request, response) {

                        $.get(encodeURI("http://127.0.0.1:8080/api/v1/search/" + request.term),
                                function(data) {
                                    response(data);
                                });

                    }
                    
                });