/* ------------------------------------------------------------------------------ * * # Select2 selects * * Specific JS code additions for form_select2.html page * * Version: 1.0 * Latest update: Aug 1, 2015 * * ---------------------------------------------------------------------------- */ $(function() { // Basic examples // ------------------------------ // Default initialization $('.select').select2({ minimumResultsForSearch: "-1" }); // Select with search $('.select-search').select2(); // Fixed width $('.select-fixed').select2({ minimumResultsForSearch: "-1", width: 250 }); // Minimum input length $(".select-minimum").select2({ minimumInputLength: 2, minimumResultsForSearch: "-1" }); // Allow clear selection $('.select-clear').select2({ placeholder: "Select a State", allowClear: true }); // Styling options // ------------------------------ // Custom menu color $('.select-menu-color').select2({ dropdownCssClass: 'bg-teal' }); // Combine custom colors $('.select-menu2-color').select2({ dropdownCssClass: 'bg-indigo-400' }); // Multiselect item colors $('.select-items-color').select2({ formatSelectionCssClass: function (data, container) { return "bg-danger"; } }); // Menu border color $('.select-border-color').select2({ dropdownCssClass: 'border-warning' }); // Tagging support $(".select-multiple-tags").select2({ width: '100%', tags:['red', 'green', 'blue', 'cyan', 'brown', 'pink'] }); // Maximum input length $(".select-multiple-maximum-length").select2({ width: '100%', tags:['red', 'green', 'blue', 'cyan', 'brown', 'pink'], maximumInputLength: 4 }); // Tokenization $(".select-multiple-tokenization").select2({ width: '100%', tags:['red', 'green', 'blue', 'cyan', 'brown', 'pink'], tokenSeparators: [",", " "] }); // Advanced examples // ------------------------------ // Infinite scroll $(".select-remote-data-infinite").select2({ placeholder: "Search for a movie", minimumInputLength: 3, ajax: { url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", dataType: 'jsonp', quietMillis: 100, data: function (term, page) { // page is the one-based page number tracked by Select2 return { q: term, //search term page_limit: 10, // page size page: page, // page number apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working }; }, results: function (data, page) { var more = (page * 10) < data.total; // whether or not there are more results available // notice we return the value of more so Select2 knows if more results can be loaded return {results: data.movies, more: more}; } }, formatResult: movieFormatResult, // omitted for brevity, see the source of this page formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results }); // Sort results $('.select-sorting-results').select2({ width: '100%', sortResults: function(results, container, query) { if (query.term) { // use the built in javascript sort function return results.sort(function(a, b) { if (a.text.length > b.text.length) { return 1; } else if (a.text.length < b.text.length) { return -1; } else { return 0; } }); } return results; } }); // Maximum selections allowed $('.select-multiple-maximum').select2({ width: '100%', maximumSelectionSize: 3 }); // // Single select with icons // // Format icon function iconFormat(state) { var originalOption = state.element; return "" + state.text; } // Initialize with options $(".select-icons").select2({ formatResult: iconFormat, minimumResultsForSearch: "-1", width: '100%', formatSelection: iconFormat, escapeMarkup: function(m) { return m; } }); // // Loading result data // // Initialize with options $(".select-loading-data").select2({ minimumInputLength: 1, minimumResultsForSearch: "-1", placeholder: "Select a State", query: function (query) { var data = {results: []}, i, j, s; for (i = 1; i < 5; i++) { s = ""; for (j = 0; j < i; j++) {s = s + query.term;} data.results.push({id: query.term + i, text: s}); } query.callback(data); } }); // Text key $(".select-text-key").select2({ placeholder: "Click fto load data", minimumResultsForSearch: "-1", data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}] }); // Data var data = [ {id: 0, tag: 'enhancement'}, {id: 1, tag: 'bug'}, {id: 2, tag: 'duplicate'}, {id: 3, tag: 'invalid'}, {id: 4, tag: 'wontfix'} ]; // Format function format(item) { return item.tag; } // String alternative key $(".select-string").select2({ placeholder: "Click fto load data", minimumResultsForSearch: "-1", data: { results: data, text: 'tag' }, formatSelection: format, formatResult: format }); // As a function $(".select-function").select2({ placeholder: "Click fto load data", minimumResultsForSearch: "-1", data:{ results: data, text: function(item) { return item.tag; } }, formatSelection: format, formatResult: format }); // Return a results object $(".select-data-function").select2({ placeholder: "Click fto load data", minimumResultsForSearch: "-1", data:function() { return { text:'tag', results: data }; }, formatSelection: format, formatResult: format }); // // Loading remote data // // Format result function movieFormatResult(movie) { var markup = ""; if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) { markup += ""; } markup += "
" + movie.title + "
"; if (movie.critics_consensus !== undefined) { markup += "
" + movie.critics_consensus + "
"; } else if (movie.synopsis !== undefined) { markup += "
" + movie.synopsis + "
"; } markup += "
"; return markup; } // Format selection function movieFormatSelection(movie) { return movie.title; } // Initialize plugin with options $(".select-remote-data").select2({ placeholder: "Search for a movie", minimumInputLength: 1, ajax: { // Instead of writing the function to execute the request we use Select2's convenient helper url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", dataType: 'jsonp', data: function (term, page) { return { q: term, // search term page_limit: 10, apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working }; }, results: function (data, page) { // parse the results into the format expected by Select2. // Since we are using custom formatting functions we do not need to alter remote JSON data return {results: data.movies}; } }, initSelection: function(element, callback) { // The input tag has a value attribute preloaded that points to a preselected movie's id // this function resolves that id attribute to an object that select2 can render // using its formatResult renderer - that way the movie name is shown preselected var id=$(element).val(); if (id!=="") { $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", { data: { apikey: "ju6z9mjyajq2djue3gbvv26t" }, dataType: "jsonp" }).done(function(data) { callback(data); }); } }, formatResult: movieFormatResult, // omitted for brevity, see the source of this page formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results }); // // Programmatic access (single) // // Initialize plugin $('.select-access').select2({ minimumResultsForSearch: "-1", placeholder: "Select State..." }); // Methods $(".access-get").click(function () { alert("Selected value is: "+$(".select-access").select2("val"));}); $(".access-set").click(function () { $(".select-access").select2("val", "CA"); }); $(".access-get2").click(function () { var data = $(".select-access").select2("data"); delete data.element; alert("Selected data is: "+JSON.stringify(data));}); $(".access-set2").click(function () { $(".select-access").select2("data", {id: "CA", text: "California"}); }); $(".access-open").click(function () { $(".select-access").select2("open"); }); $(".access-close").click(function () { $(".select-access").select2("close"); }); // // Programmatic access (multiple) // // Initialize $(".select-access-multiple").select2({ width: '100%', placeholder: "Select a state" }); // Methods $(".access-multiple-get").click(function () { alert("Selected value is: "+$(".select-access-multiple").select2("val"));}); $(".access-multiple-set").click(function () { $(".select-access-multiple").select2("val", ["ID","NV"]); }); $(".access-multiple-get2").click(function () { alert("Selected value is: "+JSON.stringify($(".select-access-multiple").select2("data")));}); $(".access-multiple-set2").click(function () { $(".select-access-multiple").select2("data", [{id: "ID", text: "Idaho"},{id:"NV", text: "Nevada"}]); }); $(".access-multiple-open").click(function () { $(".select-access-multiple").select2("open"); }); $(".access-multiple-close").click(function () { $(".select-access-multiple").select2("close"); }); // // Reacting to external value changes // // Initialize $(".select-multiple-value-changes").select2({ width: '100%' }); // Change values $(".change-to-ca").click(function() { $(".select-multiple-value-changes").val("CA").trigger("change"); }); $(".change-to-ak-co").click(function() { $(".select-multiple-value-changes").val(["AK","CO"]).trigger("change"); }); // // Select lifecycle // // Initialize with selected options $(".select-multiple-lifecycle").val(["AL","AZ"]).select2({ width: '100%' }); // Init on click $(".lifecycle-init").click(function() { $(".select-multiple-lifecycle").select2(); }); // Destroy on click $(".lifecycle-destroy").click(function() { $(".select-multiple-lifecycle").select2("destroy"); }); // // Drag and drop selected items // // Initialize with tags $(".select-multiple-drag").select2({ width: '100%', tags: ['red', 'green', 'blue', 'orange', 'white', 'black', 'purple', 'cyan', 'teal'] }); // Add jQuery UI Sortable support $(".select-multiple-drag").select2("container").find("ul.select2-choices").sortable({ containment: 'parent', start: function() { $(".select-multiple-drag").select2("onSortStart"); }, update: function() { $(".select-multiple-drag").select2("onSortEnd"); } }); // // Disabled mode // // Initialize $(".select-multiple-disabled").select2({ width: '100%' }); // Methods $(".select-multiple-enable").click(function() { $(".select-multiple-disabled").select2("enable", true); }); $(".select-multiple-disable").click(function() { $(".select-multiple-disabled").select2("enable", false); }); $(".select-multiple-readonly").click(function() { $(".select-multiple-disabled").select2("readonly", true); }); $(".select-multiple-writable").click(function() { $(".select-multiple-disabled").select2("readonly", false); }); // // Locked selections // // Data var preload_data = [ {id: 'user0', text: 'Disabled User', locked: true}, {id: 'user1', text: 'Jane Doe'}, {id: 'user2', text: 'John Doe', locked: true}, {id: 'user3', text: 'Robert Paulson', locked: true}, {id: 'user6', text: 'Planet Bob'} ]; // Initialize $('.select-multiple-locked').select2({ multiple: true, width: '100%', query: function (query) { var data = {results: []}; $.each(preload_data, function() { if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) { data.results.push({id: this.id, text: this.text }); } }); query.callback(data); } }); // Bind data $('.select-multiple-locked').select2('data', preload_data); });