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

Question

我想采用 ajax 响应。然后在 Django 模板中显示选择列表属性。我使用 ajax 请求获取数据，但选择列表组件不显示查询结果。我想在搜索关键字时显示结果查询。当页面加载未填充列表时。只显示搜索键。我发送成功 ajax 请求和回调到成功响应对象我该如何解决这个问题

响应对象： {数据：“[{“代码”：“1001”}，{“代码”：“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)