Agregué un campo select2 a mi página web y quiero cargar los registros usando ajax. Así que he declarado un campo de URL.
$(document).ready(function() { $("#field_id").select2({ placeholder: "Search...", ajax: { url: '{{ url }}', dataType: 'json', ... templateResult: formatItem,Esta URL apunta a un método que debería devolver los productos coincidentes, pero no tengo idea de cómo serializarlos para que funcione. Este es mi método:
def get_ajax(self, request, *args, **kwargs): query = request.GET.get('q', None) if query: products = Product.objects.filter(name__icontains=query) return JsonResponse(products, safe=False) else: return JsonResponse(data={'success': False, 'errors': 'No mathing items found'})Pero solo obtengo valores indefinidos. Mi método JS formatItem() se ve así:
function formatItem (item) { console.log(item); if (item.loading) return item.name || item.text; var markup = '<div class="clearfix">' + '<div class="col-sm-12">' + item.name + '</div>' + '</div>'; return markup; }¿Qué estoy haciendo mal? Gracias por adelantado.
puede usar .values para obtener el resultado como dict.
def get_ajax(self, request, *args, **kwargs): query = request.GET.get('q', None) if query: products = Product.objects.filter(name__icontains=query).values("pk","name") products = list(products) return JsonResponse(products, safe=False) else: return JsonResponse(data={'success': False, 'errors': 'No mathing items found'})en tu archivo js
$(document).ready(function(){ $("#field_id").select2({ tags: true, multiple: true, // tokenSeparators: [',', ' '], minimumInputLength: 2, minimumResultsForSearch: 10, ajax: { url: '{% url 'product:suggest_product' %}', dataType: "json", type: "GET", data: function (params) { var queryParameters = { q: params.term } return queryParameters; }, processResults: function (data) { return { results: $.map(data, function (item) { return { text: item.product, id: item.pk } }) }; } } }); });