My site uses a select2 3.5.3 multiple select field with a search box. On mobile devices, the keyboard that pops ups when the search box is focused includes a search button. Currently, the search button does nothing (I assume it's behaving like the 'enter' key, which select2 uses to confirm a selection, but not submit).
I would like the mobile keyboard's search button to submit the users query if, and only if they have already made a selection. Is there a way to do this?
Here's the relevant select2 code:
function formatPerson(person) {
// select2: template for people results display
if (person.loading) return person.text;
if (person.known_for[0]) {
var known = person.known_for[0].title
} else {
var known = ""
}
var markup = '<div><object type="image/jpg" data="https://image.tmdb.org/t/p/w45' +
person.profile_path +
'"><img id="placeholder" src="/static/images/logo_placeholder.png"></object> <strong>' +
person.name +
"</strong> ( <em>" +
known +
"</em> )</div>";
return markup;
}
function formatPersonSelection(person) {
// select2: how the people results appear once selected
return person.name;
}
$('.people_query').select2({
// select2: ajax code for people search
ajax: {
url: "https://api.themoviedb.org/3/search/person?api_key=3b6e9eed30447d42a82fa925134de4ff&language=en-US",
dataType: 'json',
delay: 250,
data: function(params) {
return {
query: params.term, // search term
};
},
processResults: function(data, params) {
return {
// "data" is the object returned, "results" is the name of the array in the object
results: data.results,
};
},
cache: true
}, // ajax
escapeMarkup: function(markup) {
return markup;
}, // custom formatter from Select2
minimumInputLength: 3,
language: {
inputTooShort: function() {
return 'Search for a person...';
}
},
maximumSelectionLength: 2,
templateResult: formatPerson,
templateSelection: formatPersonSelection,
}); //select2 params
Related
newbie here
first, my english is not good enough to describe the problem that i'm facing right now, so consider to see my code below
$('#selectOriginAirport, #selectDestinationAirport').select2({
placeholder: 'Select Airport',
ajax: {
url: '{{url('get-airports')}}',
dataType: 'json',
delay: 250,
data: function(params){
return { keyword: params.term };
},
processResults: function(datas, params) {
return {
results: $.map(datas.data, function(item) {
return {
text: item.cityName + ' - '+item.airportName + ' ('+item.airportCode+')',
id: item.airportCode+'|'+item.cityName,
lat: item.airportLatitude,
lon: item.airportLongitude
}
})
};
},
cache: true
},
escapeMarkup: function (markup) {
// console.log('markup >>> ' + markup);
return markup;
},
minimumInputLength: 3,
templateResult: function(data) {
// console.log('data >>> ' + data);
if(data.loading) {
return data.text;
}
var markup = '<p>'+data.text+'</p>';
return markup;
},
templateSelection: function(data) {
console.log(data);
if($(this).is('#selectOriginAirport')){
console.log('pepaya');
$("[name='flightOriginLat']").val(data.lat);
$("[name='flightOriginLon']").val(data.lon);
}
if($(this).is('#selectDestinationAirport')){
console.log('kates');
$("[name='flightDestinationLat']").val(data.lat);
$("[name='flightDestinationLon']").val(data.lon);
// }
return data.airportName || data.text;
}
});
first take a look that i fire select2 by #selectOriginAirport and selectDestinationAirport
the problem is i need to make a conditional on the templateSelection function but its not work, the result is none of that 2 logical is executed
thats the problem i need to solve i wish you get what i mean
Thanks in advance
I checked the source code for select2 and it looks like select2 does pass the container as the second parameter in the templateSelection option. Here's the relevant snippet from the select2.js
SingleSelection.prototype.display = function (data, container) {
var template = this.options.get('templateSelection');
var escapeMarkup = this.options.get('escapeMarkup');
return escapeMarkup(template(data, container));
};
Using that and JSFiddle's /echo/json as a sample AJAX, I've created a working snippet:
http://jsfiddle.net/shashank2104/ozy16L8s/2/
Relevant code:
templateSelection: function(selection,inst) {
if(inst && inst.length) {
return inst.attr('id') === 'select2-user-email-address-container' ? selection.email : selection.id;
}
}
Based on the container ID, the appropriate attribute can be chosen. Hope this helps.
Hi i am using multiselect dropdown, using select2 jquery 4.0.3
i am getting data using Viewbag and loading around 9000 data in viewbag below is the dropdown
#Html.DropDownListFor(m => m.Tags, ViewBag.tags1 as IEnumerable<SelectListItem> , "----Select tags----", new { #class = "Tags form-control", multiple = "multiple", #id = "Tags" })
<script>
$(document).ready(function () {
$("#Tags").select2({
placeholder: "Select Tags",
minimumInputLength: 3,
tags: true
})
});
</script>
ViewBag.tags1 contains my data , now my page load perfectly but while searching (type required data in dropdown search box) dropdown reacts very very slow.
It feels like system has got hanged, any action in that search box is very slow.
Any solution for this?
Need help.
Loading 9000 items and inserting it to DOM is a bad idea.
Please see the code below, it will be easy to implement. This will allow you to load the data by page.
You need to create an endpoint that returns JSON.
$(".js-data-example-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
Release version (Select 4.0.1)
HTML
<select id="search_customers" style="width: 300px;"></select>
Javascript:
$("#search_customers").select2({
multiple: false,
allowClear: true,
ajax: {
url: "#Url.Action("
SearchCustomers ", "
Home ")",
dataType: 'json',
delay: 250,
data: function(params) {
return {
id: params.term, // search term
};
},
processResults: function(data, params) {
return {
results: data
} // Data is a List<T> of id an text
},
}
});
The dropdown works, and I can see my records, however, when I click on one of the options the box closes, and the selected record isn't shown. My box looks like this
I've tried everything I can think of. The issue appears in all browsers. The data being return is a list of id/text pairs.
Controller code
var customers = this.service.SearchCustomers(id).Select(x => new { id = x.CustomerID, text = x.CustomerName }).ToList();
return Json(customers, JsonRequestBehavior.AllowGet);
My customer ID's had leading spaces for some reason. (Old ERP system), so adding a .Trim() call to the select statement on the customer ID fixed it. Apparently select2 doesn't like " 56", but "56" is fine!
The scenario is, I need to append a value (a selected Value) to select2 by just clicking a button. What happen is if I click my button, the other values I selected are gone/cleared.
Only 1 value is selected which is the value in my button function. I could select multiple values when typing directly to my select2 textbox, but then if i clicked the button, its value doesn't add to select2.
How do i append a value or push an additional value to data already selected in select2 on my click Button? a new value should be added to select2 selected values everytime I click the button.
I hope my code below, and my description to what im looking for kinda help you guys. Thank you.
I'm using Northwind DataBase, for testing it. (Robert King is under Employee Table)
<input type="button" onclick="Passvalue();"/>
<input type="text" id="eq" name="eq" style="width: 200px;" />
<script>
$(function () {
$("#eq").select2({
minimumInputLength: 3,
multiple: true,
ajax: {
url: '/Employee/GetAllEmployees/',
dataType: 'json',
type: "GET",
data: function (searhTerm) {
return { query: searhTerm };
},
results:
function (data) {
return { results: data};
},
},
initSelection: function (element, callback) {
var id=$(element).val(); //element value will be 'Robert';
if (id!=="") {
$.ajax('/Employee/GetAllEmployees/', {
data: {
query: id
},
dataType: "json",
type: "GET",
}).done(function(data) { callback(data); });
}
},
createSearchChoice: function (term) {
return {id: term, text: term + ' (new)', title: term };
},
formatResult: FormatContact,
formatSelection: FormatContactSelection,
escapeMarkup: function(m) {
return m;
}
});
});
function FormatContact(contact) {
return contact.text + " (" + contact.title + ")";
}
function FormatContactSelection(contact) {
return " "+ contact.text;
}
function Passvalue() {
var test2 = "Robert"; //just an example, value 'Robert' to be passed on select2 for query
$('#eq').select2("val", [test2]);
}
</script>
My Action Controller:
public ActionResult GetAllEmployees(string query)
{
var db = new Employee().GetAllEmployees(query).
ToList();
return Json(db, JsonRequestBehavior.AllowGet);
}
BL:
public IQueryable<Object> GetAllEmployees(string search)
{
var ctx = new NorthwindEntities();
var dbQuery =
(from i in ctx.Employees
where i.FirstName.Contains(search) || i.LastName.Contains(search)
select new
{
id = i.EmployeeID,
text = i.FirstName + " " + i.LastName,
title = i.Title
});
return dbQuery;
}
Instead of using "val" use "data". Something like this
this.$("#yourSelector").select2("data", [{ id: 1, text: "Some Text" },{ id: 2, text: "Some Other Text" }]);
So something like this would work for you...
var existingData = this.$("#yourSelector").select2("data");
existingData.push({ id: 11, text: "Some Text" });
this.$("#yourSelector").select2("data", existingData);
P.S : I have not tested the above code.
I have an input (textarea) that has Select2's tags applied to it. So when a user types in the name of an item that exists in my data base, it shows a list of matching items and the user can select one and a tag is created.
Here is my code so far for basic tag functionality:
$('#usualSuppliers').select2({
placeholder: "Usual suppliers...",
minimumInputLength: 1,
multiple: true,
id: function(e) {
return e.id + ":" + e.name;
},
ajax: {
url: ROOT + 'Ajax',
dataType: 'json',
type: 'POST',
data: function(term, page) {
return {
call: 'Record->supplierHelper',
q: term,
page_limit: 10
};
},
results: function(data, page) {
return {
results: data.suppliers
};
}
},
formatResult: formatResult,
formatSelection: formatSelection,
initSelection: function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id: item[0],
title: item[1]
});
});
//$(element).val('');
callback(data);
}
});
Is there a way for a new tag to be created if the text typed does not exist? Initially I thought this could some how be done by delimiting with spaces, but some items (supplier names) will have spaces in them, so that won't work.
I think when no matches are found the user needs to somehow "create" the tag by pressing a button that could appear in the drop down box, but I have no idea how to do this.
How can I allow users to create new tags that may have spaces in them and still be able to carry on adding more tags, existing or otherwise?
Yes you can do it. There is a example in the documentation. Look at http://ivaynberg.github.io/select2/#events
$("#e11_2").select2({
createSearchChoice: function(term, data) {
if ($(data).filter( function() { return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},
multiple: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
You have to create a function like createSearchChoice, that returns a object with 'id' and 'text'. In other case, if you return undefined the option not will be created.