I am trying to access $(this) inside the select2 initialization, but it returns undefined.
$(".tags").each(function() {
var placeholder = "Select Email";
if($(this).attr('name') === 'names[]')
placeholder = "Select Name";
$(this).select2({
tags: true,
placeholder: placeholder,
language: {
noResults: function () {
return 'Type and enter to add new';
},
},
escapeMarkup: function (markup) {
return markup;
},
createTag: function(params) {
console.log($(this).attr('name')); // returns undefined
if (params.term.indexOf('#') === -1)
return null;
return {
id: params.term,
text: params.term
}
}
})
});
select2() is initialized for each .tags. I need to access $(this) inside the initialization here.
How can I do that?
You can hold a reference to $(this) before calling select2()
$(".tags").each(function() {
var placeholder = "Select Email";
var $that = $(this);
if($that.attr('name') === 'names[]')
placeholder = "Select Name";
$that.select2({
tags: true,
placeholder: placeholder,
language: {
noResults: function () {
return 'Type and enter to add new';
},
},
escapeMarkup: function (markup) {
return markup;
},
createTag: function(params) {
console.log($that.attr('name'));
if (params.term.indexOf('#') === -1)
return null;
return {
id: params.term,
text: params.term
}
}
})
});
Hope this helps
The issue is because the createTag function does not run under the scope of the element which select2 was instantiated on.
To fix this you would need to retain a reference to the original element, which can be done by storing it in a variable in the each() handler:
$(".tags").each(function() {
var $tag = $(this);
// other logic...
$tag.select2({
// other logic...
createTag: function(params) {
console.log($tag.prop('name'));
if (params.term.indexOf('#') === -1)
return null;
return {
id: params.term,
text: params.term
}
}
})
});
Related
I need the autocomplete of the typeahead to work with the name field and when clicking on the item, the id value is collected.
$('.autocomplete').typeahead({
source: function (query, process) {
return $.get('view/_list.php', { query: query }, function (data)
{
data = $.parseJSON(data);
return process(data);
});
}
});
_list.php
[
{
"id":"47",
"nome":"Maril\u00e2ndia"
},
{
"id":"57",
"nome":"Pi\u00fama"
},
{
"id":"71",
"nome":"Sooretama"
}
]
Autocomplete works only if json does not have the id, only name field, but if you add the name field as it is in the json example, nothing works. And the error in the console is b.toLowerCase is not a function
You can add all the properties you wish on your objects, as long as
you provide a "name" attribute OR you provide your own displayText
method (source).
Here is the defaultText method:
displayText: function (item) {
return typeof item !== 'undefined' && typeof item.name != 'undefined' ? item.name : item;
}
Because you have a nome property in objects in _list.php, not a name property , you need to set displayText method:
$.get("_list.php", function(data){
$(".autocomplete").typeahead({ source:data,
displayText : function(item) {
return item.nome;
}
});
},'json');
Resolved.
$('.autocomplet').typeahead({
displayText: function(item) {
return item.nome
},
afterSelect: function(item) {
this.$element[0].value = item.nome;
$("#field_id").val(item.id);
},
source: function (query, process) {
return $.getJSON('_list.php', { query: query }, function(data) {
process(data)
})
}
})
I'm using select2 JQuery plugin to implement an autocomplete input-like element backed by a json endpoint, in this select2 input, I want the user can also create new objects into the same element by just giving them names or using the available on the endpoint.
My problem is that I need to access the processed 'data' mapping generated on 'processResults' key outside its function, actually inside the createTag function, I'm not sure if I need to use some JQuery method to access the result or control it using some global variable.
Here is my code:
HTML:
<p>
<select class="js-example-tags form-control" multiple="multiple"></select>
</p>
JS:
var $tags = $(".js-example-tags");
var responsejson;
$.fn.select2.amd.require(['select2/compat/matcher'], function(oldMatcher) {
$tags.select2({
ajax: {
data: function(params) {
var unicode = "\uf8ff";
var startAt = '"' + params.term + '"';
var endAt = '"' + params.term + unicode + '"';
var query = {
orderBy: "\"lowerCaseName\"",
startAt: startAt.toLowerCase(),
endAt: endAt.toLowerCase(),
print: "\"pretty\""
};
// Query paramters will be ?search=[term]&page=[page]
return query;
},
url: 'https://someappname.firebaseio.com/substancies.json?',
processResults: function(data, key) {
return {
results: $.map(data, function(obj, key) {
responsejson = {
id: key,
lower: obj.lowerCaseName,
text: obj.commonName
};
return responsejson;
})
};
}
},
tags: true,
createTag: function(params) {
if (responsejson !== undefined) {
console.log("Oppa");
}
var term = $.trim(params.term);
if (term === "") {
return null;
}
var optionsMatch = false;
var arrValue = $(".js-example-tags").select2('data');
for (var i = 0; i < arrValue.length; i++) {
var var1 = arrValue[i].lower;
var var2 = term.toLowerCase();
if (term.toLowerCase() === arrValue[i].lower) {
optionsMatch = true;
break;
}
}
if (optionsMatch) {
return null;
}
return {
id: -1,
text: term
};
},
minimumInputLength: 3,
tokenSeparators: [','],
casesensitive: false
});
});
I am using the latest version of JTable from http://jtable.org/ (downloaded it yesterday). I setup my JTable as shown below (I also included the server-side code below, which is written in C#). The List function works (the data shows up in the table), the Add function works, and the Delete function works. However, when I go to Edit a row, there is an error when trying to populate the data for the "ElevationsMulti" field. I get an error that simply says, "Cannot load options for field ElevationsMulti."
JTable Code:
$('#ReportsContainer').jtable({
title: 'Reports',
actions: {
listAction: '/Report_SingleEstimate/GetReportNames?customerId=' + customerId,
createAction: '/Report_SingleEstimate/AddReport',
updateAction: '/Report_SingleEstimate/EditReport',
deleteAction: '/Report_SingleEstimate/DeleteReport'
},
fields: {
ReportID: {
key: true,
list: false
},
ReportName: {
title: 'Report Name'
},
CustomerID: {
title: 'Customer',
list: false,
options: '/Estimates/GetCustomers',
defaultValue: customerId
},
PlanNameID: {
title: 'Plan Name',
dependsOn: 'CustomerID',
options: function (data) {
if (data.source == 'list') {
return '/Estimates/GetListOfPlanNames?customerId=0';
}
//data.source == 'edit' || data.source == 'create'
return '/Estimates/GetListOfPlanNames?customerId=' + data.dependedValues.CustomerID;
}
},
ProductID: {
title: 'Product',
options: '/Estimates/GetProducts'
},
HeaderFieldsMulti: {
title: 'Fields',
options: '/Report_SingleEstimate/GetHeaderFields',
type: 'multiselectddl',
list: false
},
ElevationsMulti: {
title: 'Elevations',
type: 'multiselectddl',
dependsOn: ['PlanNameID', 'ProductID'],
options: function (data) {
if (data.source == 'list') {
return '/Elevation/GetAllElevations';
}
return '/Report_SingleEstimate/GetElevations?PlanNameID=' + data.dependedValues.PlanNameID +
'&ProductID=' + data.dependedValues.ProductID;
},
list: false
}
}
});
$('#ReportsContainer').jtable('load');
Not sure if it makes a difference in JTable, but the ElevationsMulti depends on the PlanNameID and ProductID fields, and the PlanNameID field depends on the CustomerID fields. In other words, the ElevationsMulti field depends on a field that depends on another field (multiple nested dropdowns).
C# server-side code:
[HttpPost]
public JsonResult GetElevations(int PlanNameID, int ProductID)
{
try
{
int estimateId = Estimates.getEstimateId(PlanNameID, ProductID);
List<MyDropdownList> elevations = Estimate_ElevationList.listElevationsByEstimateForDropdown(estimateId);
return Json(new { Result = "OK", Options = elevations });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
Error here:
Further debugging has given me a more specific error.
The parameters dictionary contains a null entry for parameter 'PlanNameID' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.JsonResult GetElevations(Int32, Int32)' in 's84.Controllers.Report_SingleEstimateController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Basically, JTable sends PlanNameID to the server as a null value. Which seems to indicate that JTable has not loaded the options for the PlanNameID field yet when it makes the server call for the ElevationsMulti field.
How do I make JTable wait to load the ElevationsMulti field until after the PlanNameID field has been loaded?
Problem solved.
The problem came from using the Type "multiselectddl" in JTable. I changed the code in JTable that creates the multiselectddl to the same code as the regular dropdown. Here is the code:
_createInputForRecordField: function (funcParams) {
...
//Create input according to field type
if (field.type == 'date') {
return this._createDateInputForField(field, fieldName, value);
} else if (field.type == 'textarea') {
return this._createTextAreaForField(field, fieldName, value);
} else if (field.type == 'password') {
return this._createPasswordInputForField(field, fieldName, value);
} else if (field.type == 'checkbox') {
return this._createCheckboxForField(field, fieldName, value);
} else if (field.options) {
if (field.type == 'multiselectddl') {
return this._createDropDownListMultiForField(field, fieldName, value, record, formType, form);
} else if (field.type == 'radiobutton') {
return this._createRadioButtonListForField(field, fieldName, value, record, formType);
} else {
return this._createDropDownListForField(field, fieldName, value, record, formType, form);
}
} else {
return this._createTextInputForField(field, fieldName, value);
}
},
_createDropDownListMultiForField: function (field, fieldName, value, record, source, form) {
//Create a container div
var $containerDiv = $('<div class="jtable-input jtable-multi-dropdown-input"></div>');
//Create multi-select element
var $select = $('<select multiple="multiple" class="' + field.inputClass + '" id="Edit-' + fieldName + '" name=' + fieldName + '></select>')
.appendTo($containerDiv);
var options = this._getOptionsForField(fieldName, {
record: record,
source: source,
form: form,
dependedValues: this._createDependedValuesUsingForm(form, field.dependsOn)
});
this._fillDropDownListWithOptions($select, options, value);
return $containerDiv;
}
I am working on an app that uses Select2 (version 3.5.1). The HTML to setup this drop down / autocomplete field looks like this:
<input id="mySelect" class="form-control" type="hidden">
The form-control class in this snippet comes from Bootstrap. I am initializing this field from JavaScript using the following:
function getItemFormat(item) {
var format = '<div>' + item.ItemName + '</div>';
return format;
}
$(function() {
$('#mySelect').select2({
minimumInputLength: 5,
placeholder: 'Search for an item',
allowClear: true,
ajax: {
url: '/api/getItems',
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
query: term
};
},
results: function (data, page) {
return { results: data, id: 'ItemId', text: 'ItemText' };
}
},
formatResult: getItemFormat,
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});
});
When my select field loads, it successfully renders. Once I type at least the fifth character, it successfully pulls items from the server and lists them as options. However, if I try to select one of them, nothing happens. The drop-down popup stays open. Nothing gets put in the actual field. There are no errors in the JavaScript console. Its like I didn't click anything.
In addition, I noticed that nothing is highlighted when I put my mouse over an item or attempt to navigate the list of options with the arrow keys.
What am I doing wrong?
What is happening:
By default, results of the object you are returning in ajax.results should be an array in this structure [{id:1,text:"a"},{id:2,text:"b"}, ...].
results: function (data, page) {
var array = data.results; //depends on your JSON
return { results: array };
}
In Select2.js it actually states:
* #param options.results a function(remoteData, pageNumber, query) that converts data returned form the remote request to the format expected by Select2.
* The expected format is an object containing the following keys:
* results array of objects that will be used as choices
* more (optional) boolean indicating whether there are more results available
* Example: {results:[{id:1, text:'Red'},{id:2, text:'Blue'}], more:true}
Reading the source code, we can see that ajax.results is called on AJAX success:
success: function (data) {
// TODO - replace query.page with query so users have access to term, page, etc.
// added query as third paramter to keep backwards compatibility
var results = options.results(data, query.page, query);
query.callback(results);
}
So ajax.results is really just a function for you to format your data into the appropriate structure ( e.g. [{id:a,text:"a"},{id:b,text:"b"}, ...]) before the data is passed to query.callback:
callback: this.bind(function (data) {
// ignore a response if the select2 has been closed before it was received
if (!self.opened()) return;
self.opts.populateResults.call(this, results, data.results, {term: term, page: page, context:context});
self.postprocessResults(data, false, false);
if (data.more===true) {
more.detach().appendTo(results).html(self.opts.escapeMarkup(evaluate(self.opts.formatLoadMore, self.opts.element, page+1)));
window.setTimeout(function() { self.loadMoreIfNeeded(); }, 10);
} else {
more.remove();
}
self.positionDropdown();
self.resultsPage = page;
self.context = data.context;
this.opts.element.trigger({ type: "select2-loaded", items: data });
})});
And what query.callback eventually does is to set the logic up properly so that everything works fine when you choose one of the items and trigger .selectChoice.
selectChoice: function (choice) {
var selected = this.container.find(".select2-search-choice-focus");
if (selected.length && choice && choice[0] == selected[0]) {
} else {
if (selected.length) {
this.opts.element.trigger("choice-deselected", selected);
}
selected.removeClass("select2-search-choice-focus");
if (choice && choice.length) {
this.close();
choice.addClass("select2-search-choice-focus");
this.opts.element.trigger("choice-selected", choice);
}
}
}
So if there is some misconfiguration (e.g. results is not in the correct structure) that causes the class .select2-search-choice-focus not to be added to the DOM element before .selectChoice is called, this is what happens:
The drop-down popup stays open. Nothing gets put in the actual field. There are no errors in the JavaScript console. Its like I didn't click anything.
Solutions
There are many solutions to this. One of them is, of course, do some array keys manipulation in ajax.results.
results: function (data, page) {
//data = { results:[{ItemId:1,ItemText:"a"},{ItemId:2,ItemText:"b"}] };
var array = data.results;
var i = 0;
while(i < array.length){
array[i]["id"] = array[i]['ItemId'];
array[i]["text"] = array[i]['ItemText'];
delete array[i]["ItemId"];
delete array[i]["ItemText"];
i++;
}
return { results: array };
}
But you may ask: why must the id be "id" and the text be "text" in the array?
[{id:1,text:"a"},{id:2,text:"b"}]
Can the array be in this structure instead?
[{ItemId:1,ItemText:"a"},{ItemId:2,ItemText:"b"}]
The answer is yes. You just need to overwrite the id and text functions with your own functions.
Here are the original functions for .selecte2 in Select2.js:
id: function (e) { return e == undefined ? null : e.id; },
text: function (e) {
if (e && this.data && this.data.text) {
if ($.isFunction(this.data.text)) {
return this.data.text(e);
} else {
return e[this.data.text];
}
} else {
return e.text;
}
},
To overwrite them, just add your own functions inside the object you are passing to .selecte2:
$('#mySelect').select2({
id: function (item) { return item.ItemId },
text: function (item) { return item.ItemText }
......
});
Updates
What else is happening :
However, the text of the selected item does not appear in the field after the list closes.
This means .selectChoice has been successfully executed. Now the problem lies in .updateSelection. In the source code:
updateSelection: function (data) {
var container=this.selection.find(".select2-chosen"), formatted, cssClass;
this.selection.data("select2-data", data);
container.empty();
if (data !== null) {
formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup);
}
if (formatted !== undefined) {
container.append(formatted);
}
cssClass=this.opts.formatSelectionCssClass(data, container);
if (cssClass !== undefined) {
container.addClass(cssClass);
}
this.selection.removeClass("select2-default");
if (this.opts.allowClear && this.getPlaceholder() !== undefined) {
this.container.addClass("select2-allowclear");
}
}
From here we can see that, before the corresponding string of text is placed into the input, it would call formatSelection.
formatSelection: function (data, container, escapeMarkup) {
return data ? escapeMarkup(this.text(data)) : undefined;
},
Update: Solution
Previously I thought this.text(data) can be overwritten by having text: funcion(item){ ... } in the parameters, but sadly it doesn't work that way.
Therefore to render the text properly in the field, you should overwrite formatSelection by doing
$('#mySelect').select2({
id: function (item) { return item.ItemId },
formatSelection: function (item) { return item.ItemText }
//......
});
instead of trying to overwrite text (which should supposedly have the same effect but this way of overwriting is not yet supported/implemented in the library)
$('#mySelect').select2({
id: function (item) { return item.ItemId },
text: function (item) { return item.ItemText } //this will not work.
//......
});
The issue you are facing is that select2 wants all your results to have an id property. If they don't you need to initialise with an id function which returns the id from each result.
It will not allow you to select a result unless you satisfy one of these. So in the case of your example :
function getItemFormat(item) {
var format = '<div>' + item.ItemName + '</div>';
return format;
}
$(function() {
$('#mySelect').select2({
minimumInputLength: 5,
placeholder: 'Search for an item',
allowClear: true,
id: function(item) { return item.ItemId; }, /* <-- ADDED FUNCTION */
ajax: {
url: '/api/getItems',
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
query: term
};
},
results: function (data, page) {
return { results: data, id: 'ItemId', text: 'ItemText' };
}
},
formatResult: getItemFormat,
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});
});
You need to provide an ID that returns from your API like #itsmejodie said.
The other problem is that you have to provide select2 formatResult and formatSelection functions, once you have it loaded from Ajax but you can't put html on that. e.g.:
function format (item) {
return item.name;
}
$(function() {
$('#mySelect').select2({
minimumInputLength: 2,
placeholder: 'Search for an item',
allowClear: true,
ajax: {
url: '/api/getItems',
dataType: 'jsonp',
quietMillis: 250,
data: function (term, page) {
return {
query: term
};
},
results: function (data, page) {
return { results: data };
}
},
formatResult: format,
formatSelection: format
});
});
For version 4 of Select2 use
processResults: function (data) {
instead of
results: function (data) {
i trying to autocomplete multiple values in my mvc project , but it autocomplete for first value and second nothing occurred
my view code :
#Html.TextBox("SentUsers", "", new { #class = "text-box"})
#Html.Hidden("UsersId")
java script code :
<script type="text/javascript">
var customData = null;
var userId;
$(function () {
$("#SentUsers")
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
url: "/Ajax/AutoCompleteUsers",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
alert(data);
customData = $.map(data, function (item) {
userId = item.UserId;
return { label: item.Name + "(" + item.Email + ")", value: item.Name }
});
response(customData, extractLast(request.term))
}
})
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var usersIdVal = $("#UsersId").val();
usersIdVal += ", " + userId;
$("#UsersId").val(usersIdVal)
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
controller code :
public JsonResult AutoCompleteUsers(string term)
{
var result = (from r in db.UserItems
where r.Name.ToLower().Contains(term.ToLower())
select new { r.Name, r.Email, r.UserId }).Distinct();
return Json(result, JsonRequestBehavior.AllowGet);
}
when i trying static javascript array the autocomplete multiple values working perfect !
i think error may be in this block , but i dont know the solution
customData = $.map(data, function (item) {
userId = item.UserId;
return { label: item.Name + "(" + item.Email + ")", value: item.Name }
});
Thanks every body who tried to solve my question , and who isnt, i solved my question, and here is the solution for everybody:
my view code :
#Html.TextBox("SentUsers", "", new { #class = "text-box"})
#Html.Hidden("UsersId")
my javascript code :
<script type="text/javascript">
$(function () {
$("#SentUsers")
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 2,
source: function( request, response ) {
$.getJSON("/Ajax/AutoCompleteUsers", {
term: extractLast( request.term )
}, response );
},
search: function () {
// custom minLength
var term = extractLast(this.value);
if (term.length < 2) {
return false;
}
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var usersIdVal = $("#UsersId").val();
usersIdVal += ", " + ui.item.userId;
$("#UsersId").val(usersIdVal)
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
my controller code :
public JsonResult AutoCompleteUsers(string term)
{
var result = (from r in db.UserItems
where r.Name.ToLower().Contains(term.ToLower())
select new { label = r.Name + "(" + r.Email + ")", value = r.Name, userId = r.UserId }).Distinct();
return Json(result, JsonRequestBehavior.AllowGet);
}