I'm trying to implement a select2 search to dynamically produce results based on the users inputted data.
As the user is typing, it should send a GET request to an action that runs the query against ElasticSearch, ElasticSearch should then return a number of objects which I can convert into JSON.
I'm not seeing any results being displayed underneath the select2 searchfield, eventhough the query is being executed against ElasticSearch, and it's returning results based on the users data.
DashboardController.rb
def card_search
if params[:query].present?
cards = Elasticsearch::Model.search(params[:query]).records.first(1)
hash = {}
hash["results"] = cards.map{|v| v.serializable_hash(only: [:name]) }
render json: hash.to_json
else
render json: []
end
end
dashboard.html.erb
$(".js-data-example-ajax").select2({
ajax: {
url: "/dashboard/card_search",
dataType: 'json',
type: "GET",
delay: 250,
data: function (term, page) {
return {
query: term,
page: page
};
},
formatResult: function (item) { return item.name; },
formatSelection: function (item) { return item.name; },
results: function (data, page) {
return data;
},
cache: true
},
placeholder: 'Search for a card',
minimumInputLength: 1,
});
Parameters are successfully passed into the controller from the javascript:
Parameters: {"query"=>"Charizard", "page"=>"1"}
ElasticSearch produces array of results which is converted into JSON:
"{\"results\":[{\"name\":\"Charizard\"}]}"
When ElasticSearch returns an array and the JSON is returned to the AJAX call, this error is produced:
Solved!
I realised I had my JSON in the wrong format even though I was following the official select2 documentation: https://select2.org/data-sources/formats
So instead of storing my data in a hash and then converting that to json.
I looped through my results from ElasticSearch and stored each result in an array. I then converted this array to json and then returned it back to the AJAX call.
def card_search
if params[:query].present?
cards = Elasticsearch::Model.search(params[:query]).records.first(1)
array = []
cards.each do |c|
array << c
end
render json: array.to_json
else
render json: []
end
end
I also had to change the way I format my results on the select2 initializer.
I needed to loop through each data item, and specify the id and the text of each result so that select2 could display it.
results: function (data) {
var results = [];
$.each(data, function(index, item){
results.push({
id: item.id,
text: item.name
});
});
return {
results: results
};
},
Related
Using select2.js to retrieve remote data bound to a hidden input.
<input type="hidden" id="departmentNameEntry" style="width:300px"/>
I have set the placeholder in the initialization:
$("#departmentNameEntry").select2({
placeholder: "Search for a department",
minimumInputLength: 2,
ajax: {
url: "Handlers/DeptNameSearch_handler.ashx",
cache: false,
dataType: 'json',
type: 'GET',
data: function (term, page) {
return {
departmentNameFragment: term // search term entered into querystring for handler
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
return { results: data };
}
},
formatResult: function (item) {
return item.text;
},
formatSelection: formatDepartmentNames,
formatNoMatches: function (term) {
return 'no department name matches your query';
}
});
But as soon as an item is selected, the placeholder goes blank. How can I reset it to the original string? I have tried placing the init code in a separate function and execing it again, but no joy. Other questions I have seen answered seem to be specific to binding to a SELECT. What am I doing wrong?
I didn't RTFM closely enough.
The formatSelection option requires you to return a string that is then displayed in the select2 in place of the placeholder text. Here is my function:
function formatDepartmentNames(dept) {
$('#hfDepartmentID').val(dept.id); // when user has selected from the list, put id in an input
$('#hfDepartmentName').val(dept.text); // stash the dept name for later
DepartmentCurrentBossesGet(dept.id, dept.text); // call another function
DepartmentBossHistoryGet(dept.id); // call yet another function
$('.row4').show(); // show useful data on the page
return dept.text; // return the dept name so select2 can display it
}
Hopes this helps someone.
I'm using select2 load remote data way to render results (50 at a time) from an api. The response of the api might have duplicate values in any page response.
I have tried formatting response but unfortunately the method is having access only to the current page data.
Below is my code,
jQuery('#items').select2({
minimumInputLength : 2,
placeholder : '-- Select Items --',
ajax : {
url : '/api/v1/items',
quietMillis : 200,
dataType : 'json',
data : function (term, page) {
return {
term : term,
page : page,
page_limit : 50
};
},
results : function(data, page) {
//Here I'm getting only current page data. How can i get previous page data to check for duplicate values.
}
}
});
So, how can I filter the response and eliminate duplicate values by checking against the data fetched so far.
Any help would be appreciated.
It would be better if you post an example of your code. Let's say you have some data with duplicated entries:
var rawData = [
{
id: 'AL',
name: 'Alaska'
},
{
id: 'GE',
name: 'Georgia'
},
{
id: 'WY',
name: 'Wyoming'
},
{
id: 'GE',
name: 'Georgia'
}
];
function clearDuplicates(data) {
var temp = {};
for (var i = 0; i < data.length; i++) {
temp[data[i]['id']] = data[i];
}
return Object.values(temp);
}
var clearData = clearDuplicates(rawData);
console.log(clearData);
See output: duplicated entry 'Georgia' is now in one record. There can be a lot of ways to eliminate duplicates. This is just one simple example.
UPDATE:
If you use pagination (infinite scroll) in Select2, every page request is sent separately and you have to process result data and eliminate duplicates manually. it can be done by processResults parameter. (See example)
In that case, easiest way would be:
Handle every page request in processResults
Store all results in a global variable
Eliminate duplicates as described in the example above
Return desired result
Return:
return {
results: <YOUR_FILTERED_DATA>,
pagination: {
//paginatioin params
}
}
Ok, I feel like I'm going crazy here. I'm using the select2 jquery plugin (version 4), and retrieving data via ajax. So you can type in a name, and it will return that contact information. But I also want to return what organization that contact is a part of.
Here is my select2 initialization:
$('#contact_id').select2({
ajax: {
url: 'example.com/contacts/select',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 3,
maximumSelectionLength: 1
});
And here is the data I'm returning (laravel framework):
foreach($contacts as $con) {
$results[] = [
'id' => $con->contact_id,
'text' => $con->full_name,
'org' => [
'org_id' => $con->organization_id,
'org_name' => $con->org_name
]
];
}
return response()->json($results);
So isn't 'org' supposed to be attached to either the created option or select element by select2? So I could do something like $('#contact_id').select2().find(':selected').data('data').org or $('#contact_id').select2().data('data').org or something like that?
Idealistically, this would look like:
<select>
<option value="43" data-org="{org_id:377, org_name:'Galactic Empire'}">Darth Vader</option>
</select>
I swear I confirmed this worked last week, but now it's completely ignoring that org property. I have confirmed that the json data being returned does include org with the proper org_id and org_name. I haven't been able to dig anything up online, only this snippet of documentation:
The id and text properties are required on each object, and these are the properties that Select2 uses for the internal data objects. Any additional paramters passed in with data objects will be included on the data objects that Select2 exposes.
So can anyone help me with this? I've already wasted a couple hours on this.
EDIT: Since I haven't gotten any responses, my current plan is to use the processResults callback to spawn hidden input fields or JSON blocks that I will reference later in my code. I feel like this is a hacky solution given the situation, but if there's no other way, that's what I'll do. I'd rather that than do another ajax call to get the organization. When I get around to implementing it, I'll post my solution.
Can't comment for now (low reputation).. so... answering to slick:
Including additional data (v4.0):
processResults: function (data) {
data = data.map(function (item) {
return {
id: item.id_field,
text: item.text_field,
otherfield: item.otherfield
};
});
return { results: data };
}
Reading the data:
var data=$('#contact_id').select2('data')[0];
console.log(data.otherfield);
Can't remember what I was doing wrong, but with processResults(data), data contains the full response. In my implementation below, I access this info when an item is selected:
$('#select2-box').select2({
placeholder: 'Search Existing Contacts',
ajax: {
url: '/contacts/typeahead',
dataType: 'json',
delay: 250,
data: function(params){
return {
q: params.term,
type: '',
suggestions: 1
};
},
processResults: function(data, params){
//Send the data back
return {
results: data
};
}
},
minimumInputLength: 2
}).on('select2:select', function(event) {
// This is how I got ahold of the data
var contact = event.params.data;
// contact.suggestions ...
// contact.organization_id ...
});
// Data I was returning
[
{
"id":36167, // ID USED IN SELECT2
"avatar":null,
"organization_id":28037,
"text":"John Cena - WWE", // TEXT SHOWN IN SELECT2
"suggestions":[
{
"id":28037,
"text":"WWE",
"avatar":null
},
{
"id":21509,
"text":"Kurt Angle",
"avatar":null
},
{
"id":126,
"text":"Mark Calaway",
"avatar":null
},
{
"id":129,
"text":"Ricky Steamboat",
"avatar":null
},
{
"id":131,
"text":"Brock Lesnar",
"avatar":null
}
]
}
]
I'm using select2 in order to create styled select boxes with autocomplete. I have 2 choices, load the data from a json file, or create a simple array from that json and use a workaround to populate the select tag. I read through their api examples but obviously I'm missing something. My goal is to create a drop down list with many elements, the problem is that the data is a huge array, which consists of aprox 15k cells. I tried a workaround using this code:
HTML:
<select multiple="multiple" data-placeholder="Select item" id="itemsList">
JS:
var list = $("#itemsList");
var txt = "";
for(var i=0;i<itemsArray.length;i++){
txt =txt+ '<option value='+itemsArray[i]+'>'+itemsArray[i]+'</option>';
}
list.append(txt);
This works, but obviously select2 manages things more efficiently, as this "method" takes several good seconds to load the data in to the DOM.
The second approach is to load the json straight to the select2 box and let the framework to manage the construction, but this leads me to an error: Cannot read property 'slice' of undefined.
JSfiddle here
This is the code:
HTML:
<div class="input-group" id="itemContainer">
<label> Select an item: </label>
<select multiple="multiple" data-placeholder="Items list" id="itemList">
</select>
</div>
JS:
$("select").select2({
ajax: {
//this is a small demo json to illustrate its structure
url: "https://api.myjson.com/bins/5amne",
dataType: 'json',
delay: 0,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
console.log(data);
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,
});
Your processData function should handle custom data format, e.g. parse it in a way that is understandable by the select2. Here's how it can be done:
processResults: function (data) {
var results = $.map(data, function (value, key) {
return {
text: key,
children: $.map(value, function (v) {
return {
id: v,
text: v
};
})
};
});
return {
results: results,
};
},
See the updated JSFiddle
Edit
If you want the select2 to handle filtering for you, there are two ways of doing that:
Adding server-side support;
Handling everything on the client.
Since you're loading data via from a static JSON file, you need to go #2. In order to do that, you first need to load all the data, parse it, and only then initialize the select2 control. You can do it like this:
function processData(data) {
return $.map(data, function (value, key) {
return {
text: key,
children: $.map(value, function (v) {
return {
id: key + v,
text: v
};
})
};
});
}
function initSelect2(data) {
$("select").select2({
data: data
});
}
$.ajax({
url: "https://api.myjson.com/bins/1n1rm",
dataType: 'json',
cache: true,
success: function (data) {
initSelect2(processData(data));
}
});
In order to use json for select2, the json format should be something like this:
{ results: [ {id:'first', text:'a'}, {id:'second', text: 'b'} ]
, more: false }
JSON format for jquery-select2 multi with ajax
Your current json doesn't seem to have the right format. I think you should change your json format.
I am working on an ASP.NET MVC 4 app. In my app, I'm trying to replace my drop down lists with the Select 2 plugin. Currently, I'm having problems loading data from my ASP.NET MVC controller. My controller looks like this:
public class MyController : System.Web.Http.ApiController
{
[ResponseType(typeof(IEnumerable<MyItem>))]
public IHttpActionResult Get(string startsWith)
{
IEnumerable<MyItem> results = MyItem.LoadAll();
List<MyItem> temp = results.ToList<MyItem>();
var filtered = temp.Where(r => r.Name.ToLower().StartsWith(startsWith.ToLower());
return Ok(filtered);
}
}
When I set a breakpoint in this code, I notice that startsWith does not have a value The fact that the breakpoint is being hit means (I think) my url property below is set correct. However, I'm not sure why startsWith is not set. I'm calling it from Select 2 using the following JavaScript:
function formatItem(item) {
console.log(item);
}
function formatSelectedItem(item) {
console.log(item);
}
$('#mySelect').select2({
placeholder: 'Search for an item',
minimumInputLength: 3,
ajax: {
url: '/api/my',
dataType: 'jsonp',
quietMillis: 150,
data: function (term, page) {
return {
startsWith: term
};
},
results: function (data, page) {
return { results: data };
}
},
formatResult: formatItem,
formatSelection: formatSelectedItem
});
When this code runs, the only thing I see in the select 2 drop down list is Loading failed. However, I know my api is getting called. I can see in fiddler that a 200 is coming back. I can even see the JSON results, which look like this:
[
{"Id":1,"TypeId":2,"Name":"Test", "CreatedOn":"2013-07-20T15:10:31.67","CreatedBy":1},{"Id":2,"TypeId":2,"Name":"Another Item","CreatedOn":"2013-07-21T16:10:31.67","CreatedBy":1}
]
I do not understand why this isn't working.
From the documentation:
Select2 provides some shortcuts that make it easy to access local data
stored in an array...
... such an array must have "id" and "text" keys.
Your json object does not contain "id" or "text" keys :) This should work though i have not tested it:
results: function (data, page) {
return { results: data, id: 'Id', text: 'Name' }
}
There's further documentation following the link on alternative key binding... I believe thats where your problem lies.
Hopefully this helps.