python - 如何在 Django 中使用 selectize.js 显示查询结果
问题描述
我想采用 ajax 响应。然后在 Django 模板中显示选择列表属性。我使用 ajax 请求获取数据,但选择列表组件不显示查询结果。我想在搜索关键字时显示结果查询。当页面加载未填充列表时。只显示搜索键。我向成功响应对象发送成功 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)
解决方案
我解决了问题。
list_data_json = json.dumps(list(db))
更改以下代码
list_data_json = jlist(db)
context=list_data_json
return JsonResponse(context,safe=False)
推荐阅读
- php - 如何解决网络聊天的令牌问题
- javascript - 为什么这个简单的 JS 承诺会返回一个承诺?
- c# - 为什么我的 gridview 不返回我更新的内容?
- mongodb - 如何使用let与mongoose js的导入模型进行管道
- google-cloud-dataflow - Google Dataflow:从正在运行的管道本身获取作业名称和开始时间
- mobile - 如何创建用于移动查看的下拉菜单栏?
- react-native - Expo - 本地通知在设备上不起作用
- python - 我可以使用 python 脚本获取用户在登录 Maximo 时运行的查询吗?
- c# - 为什么 INotifyPropertyChanged 的 SetProperty() 方法需要一个 ref 参数?
- java - 如何通过对话框类中的 button-actionPerformed 从我的面板类中调用一个方法,得到它在面板类中的实例?