如何在Django中用selectize.js显示查询结果

Question

我想在response.then模板中显示选择列表属性。我使用ajax请求获取数据，但选择列表组件不显示查询结果。我希望在搜索keyword.When页面加载不填充列表时显示结果查询。只显示搜索键。发送成功ajax请求和回调到成功响应对象。如何解决此问题

返回对象：{data："{"Code"："1001"}，{"Code"："1100"}"}

Django模板

{% block body %}
{ % load bootstrap4 %} {# import bootstrap4/bootstrap3 #}
{% load i18n %}


<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js">
 </script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.min.css" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.legacy.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.legacy.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.css" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.css" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css.map" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.legacy.css" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.legacy.min.css" rel="stylesheet" type="text/css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.legacy.min.css.map" rel="stylesheet" type="text/css">
<script>
 $(document).ready( function () { 
  $('#select_code').selectize({
valueField: 'code',
labelField: 'code',
searchField: 'code',
options: [],
create: true,
load: function(query, callback) {
    if (!query.length) return callback();
    $.ajax({
        url: 'test/json',
        type: 'GET',
        dataType: 'json',
        data: {
            q: query
        },
        error: function() {
            callback();
        },
        success: function(res) {
          console.log(res.data)
        callback(res.data)
        }
     });
    }
  });
})
</script>

<div class="form-group">
   <div class="col-md-12">

    <select class="form-control" id="select_code" ></select>
 </div>

​

test_json.py

def test_kolon(request):
    q=request.GET.get('q')
    db = Test.objects.filter(
                       Q(code__icontains= q)
                    ).values('code')
 list_data_json = json.dumps(list(db))

 context={
      "data":list_data_json
 }
 return JsonResponse(context)

Answer 1

我解决了问题。

list_data_json = json.dumps(list(db))

更改以下代码

list_data_json = jlist(db)
context=list_data_json
return JsonResponse(context,safe=False)