Develop Reference

Select2 4.0.0 multi-value select boxes - initial selection

I am attempting to have Select2 (4.0.0rc1) multi-value select box have preloaded data, but it is not working.
HTML
<select id="sj" class="js-example-basic-multiple form-control" multiple="multiple">
<option value="1">Tickets</option>
<option value="2">PArking</option>
<option value="3">Special Events</option>
<option value="4">Athletics</option>
</select>
JavaScript
$(document).ready(function() {
$("#sj").select2();
$("#example tbody").on("click", "tr",function(){
var defaultData = [{id:1, text:'Tickets'},{id:2,text:'Parking'},{id:3,text:'Athletics'}];
$("#sj").select2({data:defaultData});
});
I want this code to programmatically prepopulate the selected items on click.
EDIT
what I'm after: The drop down has a total of N Multi- selectable items , i click on a row , and it passes in 3 options as initially selected, how do i do an initSelection as 3.5.2 did? Think of it this way: I am using the multi select drop down to show attributes associated, if its a sporting event, It may only come with tickets, but a week from now i may want to add parking for this event, but it needs to remember I already had tickets associated with this event
I accomplished this in 3.5.2 doing the following:
initSelection : function (element, callback) {
var id=$(element).val();
if (id!=="") {
$.ajax("index.cfm/tickets/select2get", {
dataType: 'json',
data: {
nd_event_id: $('#nd_event_id').val(),
passes: 'TK,PK,ATH',
},
}).done(function(data) { callback(data); });
}
},
But this will not work in 4.0.0 due to migration from inputs to selects

Easier to understand if we separate the logic/code into smaller chunks and then tie them together... easier to debug as well if things go wrong. So you'll need:
Drop-down items to populate in the format of (key, value) which the
Select2 format is (id, text). You've got that correct, so let's
put that into a variable:
var infoCategory = [
{
"id": 1,
"text": "Tickets"
},
{
"id": 2,
"text": "Parking"
},
{
"id": 3,
"text": "Special Events"
},
{
"id": 4,
"text": "Athletics"
}
];
Select2 needs to know about the dropdown items we just created and it will be looking for a configuration of data as well as other options. Basically, "data" is one of the configuration options you pass along to it, if the <select> element doesn't have any <option> child elements. So let's create another variable for the Select2 configuration options as such:
var select2Options = {
"multiple" = false,
"data" = infoCategory
};
A full list of the default Select2 options can be found in their documentation.
Create the <select> element:
<select id="name="s2select01"></select>
Now, either you can directly initialize Select2 with configuration options (which includes drop-down data), like you did in your example, as such:
$('#s2select01').select2(select2Options);
Or you can use the above initialization line of script in a click event and tie it to another element, like so:
$('#someButtonID').click(function () {
$('#s2select01').select2(select2Options);
});
I've created a verbose demonstration on CodePen so you can see it all tied together.

Multiple <select> using selectize, option removal when already selected

I'm new in using selectize.js, and this is the simplified version of my problem. Please see fiddle below.
Fiddle
What I want is not to select the item when it is already selected.
Ex.
click the Add button and then select the full name.
click the Add again.
Full name should not be selected in the second <select> or should not be visible.
How will I be able to do this?
HTML
<button>Add</button><br/><br/>
<div id="container"></div>
JS
var saveAsOptions = [
{ value: 'full-name', text: 'Full Name' },
{ value: 'first-name', text: 'First Name' },
{ value: 'last-name', text: 'Last Name' }
];
var i = 1;
var $selectSaveAs;
$('button').on('click', function(){
$('#container').append(generateSaveAs(i));
$selectSaveAs = $('#saveAs' + i).selectize({
options: saveAsOptions,
placeholder: '- Fields -'
});
i++;
});
function generateSaveAs(id){
return '<select id="saveAs' + id + '"></select>';
}

So every time you are creating a new drop down you are inserting static values. By analyzing the code I see the selected value always have a class item. So what we can do is create a new array to show in dropdown and filter out the ones already selected. And then we can bind it in drop down.
To filter out you can use filter
saveAsOptionsFiltered = saveAsOptions; //Initialize with your all drop down options
$(".item").each(function(index,element) {
/*Filter out the already selected ones*/
saveAsOptionsFiltered = saveAsOptionsFiltered.filter(function (savevalue) {return savevalue.text !== $(element).text() });
});
JSFiddle
I have not handled the condition when all are selected and you stop adding more I have just shared the code in which you can filter out the selected ones.

Angularjs select: How to get the position of the selected item and set default selection

So, I saw in another SO question this trick to get the position of the selected item:
<select
ng-model="index_selected_item"
ng-options="idx as choice.name for (idx, choice) in items">
</select>
Now I want the selection list to start displaying the first item as selected, but I am not able to do it.
I have tried using ng-init to set index_selected_item = 0, but the default selected option remains blank.
Thanks!

Finally, I did it the way it is shown in here:
http://codepen.io/paulbhartzog/pen/xBFir
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 }
];
$scope.selected_by_reference = $scope.options[1];

Tab-off ui-bootstrap typeahead only when row is explicitly selected

I've created this jsBin to demonstrate the issue I'm having. If you go here, try type "Five" and move on. Your natural reaction would be to type "Five" and then press tab, and if you wanted "Five-Hundred," you'd arrow-down once; however, in this case, you have to type "Five" and then either press escape or physically mouse out of the box without clicking any of the other options
So, basically, when you're using typeahead, if there is at least one matching result for your current criteria, pressing tab will select it. My expected behavior is that as you type, the current selected option is exactly what you're typing, and if you want one of the other results you must down-arrow one or more times.
Here is the code that's in the jsBin:
<div ng-controller="TestController">
<div>
{{selected}}
</div>
<input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue">
</div>
And the JavaScript:
var app = angular.module('app', ['ui.bootstrap'])
.controller('TestController', function($scope) {
$scope.typeaheadOptions = [
'One','Two','Three','Four','Five-Hundred','Fifteen','Fourteen','Fifty','Six','Seven','Eight','Nine','Ten'
]
});

I ended up modifying ui-bootstrap to work how I want it to.
I added a mustMouseDownToMatch property/attribute to the directive, like:
<input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue" typeahead-mouse-down-to-match="true">
And the javascript:
var mustMouseDownToMatch = originalScope.$eval(attrs.typeaheadMouseDownToMatch) ? originalScope.$eval(attrs.typeaheadMouseDownToMatch) : false;
I also added this function which will put the current text into the first item of the typeahead list, and make it the selected item:
var setFirstResultToViewValue = function (inputValue) {
scope.matches.splice(0, 0, {
id: 0,
label: inputValue,
model: inputValue
});
// set the selected item to the first item in the list, which is this guy
scope.activeIdx = 0;
}
And that is called in the getMatchesAsync call in the typeahead directive:
var getMatchesAsync = function(inputValue) {
// do stuff
$q.when(parserResult.source(originalScope, locals)).then(function(matches) {
// do stuff
if (matches.length > 0) {
// do stuff
}
if (mustMouseDownToMatch) {
setFirstResultToViewValue(inputValue);
}
// do stuff
};

A more recent way to do this since I ran into the same issue and maybe wasn't available back then.
You can add this now as an attribute
typeahead-should-select="$ctrl.typeaheadShouldSelect($event)"
In your controller or custom component add the following which will allow you to tab now and also if you tab over the item you can press enter to select it.
self.typeaheadShouldSelect = function($event) {
if ($event.key === 'Tab') {
var e = $.Event('keydown');
e.which = 40;
$($event.currentTarget).trigger(e);
}
if ($event.key === 'Enter') {
return true;
}
}

Adding row on the top using Angular - Xeditable

I want by clicking in the "Add row" button the new row will be on the top table.
I have this basic example.
I tried to add a filter to the function bellow, but I got hte same result.
// add user
$scope.addUser = function() {
$scope.inserted = {
id: $scope.users.length+1,
name: '',
status: null,
group: null
};
$scope.users.push($scope.inserted);
};
Thank you for help.

Use unshift instead of push so that the item is added to the start of the array:
$scope.users.unshift($scope.inserted);
Demo