Develop Reference

Prevent loading of data with select2 until minlength is met

I'm not sure if i'm going about this the correct way, but if you have any constructive comment that can help lead me in the right direction please share. I've been stuck on this for quite some time.
I have the following select2 control that is loading the entire table for a field of that table. There is a function with select2 called minimumInputLength, which still seems to load the table in it's entirety instead of querying on the first three characters. The pagination works correctly as shown in this 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
});
});
The problem is my view is loading the entire table for active students on the rendering of the html.
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 render the html and select2 control with:
{% 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>
Now I know how to prevent the loading of the data in my filter, which I do with the following, but how can I get this to work with my view and select2's minimum input length:
# 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()
I've also tried the following options with select2 and javascript unsuccessfully, because the data doesn't seem searchable :
$(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,
},
};
},
},
});
});
How can I get my data to not load until the minimum inputlength of select2 is met and still be searchable? I'm having to wait for the entire table to load before I can search and return results.

Certainly too late for a response. but in case it helps someone else. I got mine to work this way:
$("#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,
});

I think that the minimumInputLength it only works if you haven't loaded your options (ajax load). In your code the select has the options loaded at the beginning so minimumInputLength will not work.
So if you populate all the options at the page load the minimumInputLength will no affect.
Hope the solution goes this way.

selelct2 autocomplete not showing values from database

This is my code. Callback function shows undefined value.In image You can see I am getting undefined values which are initially fetched from database
THis is HTML
<input type="text" name="city[]" class="itemSearch form-control" id="city_dropdown" value='{{$cities}}'>
PHP CODE:
$cities = $this->city->select('city_name', 'id')->whereIn('id', $city)->get()->toArray();
$cities = json_encode($cities);
I get this [{"city_name":"Badarpur Railway Town","id":321},{"city_name":"Bahbari Gaon","id":322}] in $cities. which is a value of HTML text box.
$("#city_dropdown").select2({
minimumInputLength: 2,
tags: [],
ajax: {
url: adminPath+"pincode/getcitydropdown",
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return {
term: term
};
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.city_name,
id: item.id
}
})
};
}
}, initSelection : function (element, callback) {
var elementText = $(element).attr('value');
callback(JSON.parse(elementText));
}
});

Aria attributes not be added to results

I am using select 2 version 4.0.2 and have created a select to look up remote data via ajax.
I am getting the data ok but when the results are rendered, the aria-selected attribute is not being added and therefore I can not select any of the options.
I believe it may be to do with the templateResult and templateSelection but I don't know what needs to be changed.
Jquery:
$("#select2").select2({
theme: "bootstrap",
ajax: {
url: "/search/games",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
type: "suggest"
};
},
processResults: function (data, params) {
return {
results: data.games,
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 3,
templateResult: formatResult,
templateSelection: formatSelection
});
function formatResult(game) {
markup = "<p>" + game.name + "</p>";
return markup;
};
function formatSelection(game) {
markup = "<p>" + game.name + "</p>";
return markup;
}
Form:
= form_for [:member,#event], :html => {:class => "formtastic form-horizontal"} do |f|
%fieldset
%div{:class => "control-group"}
= f.label :game_id, :class => "control-label"
%div{:class => "controls"}
= f.select :game_id, "", {}, :class => "form-control"

Turns out when processing the results, the data has to be mapped to an id and text attribute for it to be recognised:
processResults: function (data, params) {
return {
results: jQuery.map( data.games, function( game ) {
var arr = {id:game.name,text:game.name};
return arr;
}),
};
}

select2 after refresh cannot be auto selected,initSelection and callback no working

[html]
<input style="width: 200px;" type = 'text' data-init-text = '$this->item_code' value = '$this->item_code' name = 'item_code' id = 'item_code' />
[javascript]
function itemCodeAutoComplete(){
$("#item_code").select2({
placeholder: "Search for a Item",
minimumInputLength: 1,
id : function(priv) {
return priv.code;
},
ajax: {
url: 'autocomplete.php?action=item&type=s&bpartner_id='+$('#bpartner_id').val()+"&category_id="+$('#category_id').val()+"&warehouse_id="+$('#warehouse_id').val(),
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
q: term, // search term
};
},
results: function (data, page) {
return { results: data.items };
}
},
initSelection: function(element, callback) {
var elementText = $(element).attr('data-init-text');
elementText = "test";
var data = [{id: elementText , text:elementText}];
callback(data);
},
formatResult: function(data) {
var markup = '<div class="row-fluid">' +
'<div class="span2" >'+data.label+'</div></div>';
return markup;
},
formatSelection: function(data){
$('#item_name').val(data.label_name);
$('#uom_id').val(data.label_uomid);
$('#unit_price').val(data.label_unitprice);
$('#item_id').val(data.id);
return data.value;
},
});
Cannot do a auto display text => "test" and also callback is not working.

`problem solve.
now i know callback(data); mean go to my formatSelection(data),
so inside data.value field need same with initSelection field
because formatselection return data.value; so in initSelection aslo need to set text become value
callback(data);
},`

Set selected value on select2 without loosing ajax

I have this select2 code in my html (mvc with razor) page:
$('#QuickSearchState').select2({
minimumInputLength: 3,
width: 'resolve',
ajax: {
url: '#Url.Action("QuickSearchState", "DataCenter")',
contentType: 'application/json',
dataType: 'json',
type: 'POST',
traditional: true,
quietMillis: 400,
data: function(term, page) {
var data = {
term: term
};
return data;
},
results: function(data, page) {
return { results: data };
}
},
initSelection: function(element, callback) {
var data = { id: element.val(), text: element.val() };
callback(data);
},
formatResult: function(format) {
return format.label;
},
formatSelection: function(format) {
//this is a knockout view model
vmNewAddress.IdState(format.id);
vmNewAddress.StateName(format.stateName);
return format.label;
},
dropdownCssClass: "bigdrop",
escapeMarkup: function(m) { return m; }
});
But i have another select in my code that can set a state in this select, but i dont know how to set this value to that select.
In my html i have this:
<select class="width-xl" data-bind="options: vm.GivenLocationsForConnection, optionsText: 'DisplayFormat', value: SelectedLocation"></select> -> first select that can fill the second state search select with a state
#Html.Hidden("query", null, new { #id = "QuickSearchState", #class = "width-xl", placeholder = "Ej. Montevideo" }) -> second select, this is a search for states and selects a single state

I am not sure if this is what you want but if you only want to select a value in the select you can just do below
$("#QuickSearchState").select2("val", "<YOUR VALUE>");