jQuery UI带有Django图片的自动完成功能

Question

我在Django项目中启用了自动完成功能。工作正常。但我想在建议中添加图片。我尝试了官方文档，但信息被解析：https://jqueryui.com/autocomplete/#custom-data

我的JS：

$(function(){    
  $.ui.autocomplete.prototype._renderItem = function (ul, item) {      
      item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span style='font-weight:bold; color:#C45525'>$1</span>");
      return $("<li></li>")
              .data("item.autocomplete", item)
              .append("<a>" + item.label + "</a>")
              .appendTo(ul);
  };     
  $('.prod2').autocomplete({
    open: function() { $('.ui-menu').width(350);
} ,
    source: '/finder/search_auto',
    minLength: 3,       
});    
  });

我的看法：

  def search_auto(request):
    if request.is_ajax():    
    q = request.GET.get('term', '')
    products = Product.objects.filter(real_name__icontains=q)    
    results = []
    for pr in products:
        product_json = {'value':0, 'image':0, 'label':0}
        product_json['value'] = pr.real_name
        product_json['label'] = pr.real_name
        product_json['img'] = pr.picture               
        results.append(product_json)
    print (results)
    data = json.dumps(results)
  else:
    data = 'fail'
  mimetype = 'application/json'
  return HttpResponse(data, mimetype)

我不知道如何将我的产品图片网址传递到我的data中以及如何显示它。

Answer 1

您认为，请考虑以下因素：

def search_auto(request):
  if request.is_ajax():    
    q = request.GET.get('term', '')
    products = Product.objects.filter(real_name__icontains=q)    
    results = []
    for pr in products:
      product_json = {}
      product_json.label = pr.real_name
      products_json.value = pr.real_name
      products_json.image = pr.picture
      results.append(product_json)
    data = json.dumps(results)
  else:
    data = 'fail'
  mimetype = 'application/json'
  return HttpResponse(data, mimetype)

这将导致对象数组以JSON的形式传递回AJAX。

[{
  "label": "John Smith",
  "value": "John Smith",
  "image": "./img/jsmith.jpg"
}]

现在，您可以在自动完成中使用这些详细信息。

$(function() {
  $('.prod2').autocomplete({
    open: function() {
      $('.ui-menu').width(350);
    },
    source: '/finder/search_auto',
    minLength: 3,
  })._renderItem = function(ul, item) {
    return $("<li>")
      .data("item.autocomplete", item)
      .append("<div><img src='" + item.image + "' /> " + item.label + "</div>")
      .appendTo(ul);
  };
});

Answer 2

以这种方式更改了我的JS，它应能正常工作：

$(function() {
  $('.prod2').autocomplete({
    open: function() {
      $('.ui-menu').width(350);
    },
    source: '/finder/search_auto',
    minLength: 3,
  }).data("ui-autocomplete")._renderItem = function(ul, item) {
    item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span style='font-weight:bold; color:#C45525'>$1</span>");
    return $("<li>")
      .data("item.autocomplete", item)
      .append("<div><img src='" + item.img + "' height='55' /> " + item.label + "</div>")
      .appendTo(ul);
  };
});