Jquery UI 在 Django 中使用图片自动完成
Jquery UI autocomplete with pictures in Django
我在我的 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'></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)
我不知道如何将我的产品图片 url 传递到我的 data
如何显示它。
对于您的观点,请考虑以下几点:
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);
};
});
以这种方式更改我的 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'></span>");
return $("<li>")
.data("item.autocomplete", item)
.append("<div><img src='" + item.img + "' height='55' /> " + item.label + "</div>")
.appendTo(ul);
};
});
我在我的 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'></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)
我不知道如何将我的产品图片 url 传递到我的 data
如何显示它。
对于您的观点,请考虑以下几点:
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);
};
});
以这种方式更改我的 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'></span>");
return $("<li>")
.data("item.autocomplete", item)
.append("<div><img src='" + item.img + "' height='55' /> " + item.label + "</div>")
.appendTo(ul);
};
});