我不确定我是否以正确的方式进行此操作,但是如果您有任何建设性的评论可以帮助我朝正确的方向前进。我已经陷入了相当长的时间。
i具有以下Select2控件,该控件正在为该表的字段加载整个表。Select2的函数称为MinimumIminupTuplength,它似乎仍然可以将表加载到整体中,而不是在前三个字符上查询。分页正常工作,如此fiddle.js:http://jsfiddle.net/jgf5fkfl/66/
$.fn.select2.amd.require(
['select2/data/array', 'select2/utils'],
function (ArrayData, Utils) {
function CustomData($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
}
function contains(str1, str2) {
return new RegExp(str2, "i").test(str1);
}
Utils.Extend(CustomData, ArrayData);
CustomData.prototype.query = function (params, callback) {
if (!("page" in params)) {
params.page = 1;
}
var pageSize = 50;
var results = this.$element.children().map(function (i, elem) {
if (contains(elem.innerText, params.term)) {
return {
id: [elem.innerText, i].join(""),
text: elem.innerText
};
}
});
callback({
results: results.slice((params.page - 1) * pageSize, params.page * pageSize),
pagination: {
more: results.length >= params.page * pageSize
}
});
};
$(".js-example-basic-multiple").select2({
ajax: {},
minimumInputLength: 3,
allowClear: true,
width: "element",
dataAdapter: CustomData
});
});
问题是我的观点是为活跃的学生加载整个表格。
def multisearch(request):
userid = ADMirror.objects.filter(student_status_id = 1).values('studentntname').values_list('studentntname', flat=True)
args = {'userid':userid}
return render(request, 'multisearch.html',args)
i用:
渲染html和select2控件 {% block extra_js %}
{{ block.super }}
{{ form.media }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src= "{% static '/search/user_select2.js' %}" type="text/javascript"></script>
<div class="col"><h4 style="margin-top: 0"><strong>Student ID Search</strong></h4><select class="js-example-basic-multiple" value = "{{ userid }}" style="width: 1110px" required>
{% for user in userid %}
<option value="{{ user }}"> {{ user }}</option>
{% endfor %}
</select>
现在,我知道如何防止过滤器中的数据加载,但是我该如何处理我的视图和Select2的最小输入长度:
:# doesn't load data on the initial load of the search.html page
def __init__(self, *args, **kwargs):
super(StudentFilter, self).__init__(*args, **kwargs)
# at startup user doen't push Submit button, and QueryDict (in data) is empty
if self.data == {}:
self.queryset = self.queryset.none()
我还尝试了Select2和JavaScript未能成功的以下选项,因为数据似乎无法搜索:
$(document).ready(function () {
$('.js-example-basic-multiple').select2({
minimumInputLength: 3,
allowClear: true,
placeholder: {
id: -1,
text: 'Enter the Student id.',
},
ajax: {
type: 'POST',
url: '',
contentType: 'application/json; charset=utf-8',
async: false,
dataType: 'json',
data: function (params) {
return "{'searchFilter':'" + (params.term || '') + "','searchPage':'" + (params.page || 1) + "'}";
},
processResults: function (res, params) {
var jsonData = JSON.parse(res.d);
params.page = params.page || 1;
var data = { more: (jsonData[0] != undefined ? jsonData[0].MoreStatus : false), results: [] }, i;
for (i = 0; i < jsonData.length; i++) {
data.results.push({ id: jsonData[i].ID, text: jsonData[i].Value });
}
return {
results: data.results,
pagination: { more: data.more,
},
};
},
},
});
});
直到满足Select2的最小输入量并仍然可以搜索,我如何才能将数据不加载?我必须等待整个表加载,然后才能搜索和返回结果。
肯定为时已晚。但是,如果它可以帮助别人。我让我的工作方式:
$("#select-company").select2({
ajax: {
url: "/en/entreprises.json", //URL for searching companies
dataType: "json",
delay: 200,
data: function (params) {
return {
search: params.term, //params send to companies controller
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
},
placeholder: "Start typing",
minimumInputLength: 3,
});
$("#selctor").select2({
placeholder: ".................. choos ....................",
//dropdownCssClass: 'smalldrop',
width: '100%',
ajax: {
url: "/search RUL",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params,
// page: params.page
};
},
results: function (data, search) {
return {
results: data.items
};
},
cache: true
},
templateResult: function (item) {
if (item.loading) return item.text;
return item.text;
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 3,
});
我认为它仅在没有加载选项(ajax load(时起作用的最小值限制。在您的代码中,SELECT具有在开始时加载的选项,因此MinimumInmimInputlength将无法使用。
因此,如果您在页面上填充所有选项,则最低限额inminutputlength不会影响。
希望解决方案会这样。