"select 2"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/drebrikov/pen/awpEI?depth=everything&order=popularity&page=48&q=generate&show_forks=false" /> <meta charset="utf-8" /> <title>AngularJS select2</title> <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"> </script> <script src="//cdn.jsdelivr.net/select2/3.4.5/select2.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script> <script src="https://rawgithub.com/angular-ui/ui-select2/master/src/select2.js"></script> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" /> <link rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.5/select2.css" /> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css'><link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/select2/3.4.5/select2.css'> <style class="cp-pen-styles"> body { padding: 15px; }</style></head><body> <html lang="en" ng-app="demo"> <body ng-controller="DemoCtrl"> <h3>select2 test</h3> <h4>Parameteres</h4> <form name="myForm"> ComboBoxes: <input type="text" ng-model="comboBoxesCount" required="" />Options: <input type="text" ng-model="optionsCount" required="" /> <button ng-click="generate()">Generate</button> </form> <h4>Generated UI</h4> <div ng-repeat="comboBox in comboBoxes" style="padding-top: 15px;"> <p>Selected: {{comboBox.selected.text}}</p> <div ng-model="comboBox.selected" ui-select2="select2options(options)" placeholder="{{options.length}} variants. Please select." style="width: 300px;"> </div> </div> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.0.3.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.min.js'></script><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js'></script><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js'></script><script src='https://rawgithub.com/angular-ui/ui-select2/master/src/select2.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js'></script> <script >'use strict'; var app = angular.module('demo', ['ngSanitize', 'ui.select2']); app.controller('DemoCtrl', function($scope, $http) { $scope.optionsCount = 100; $scope.comboBoxesCount = 6; $scope.options = []; $scope.comboBoxes = []; $scope.generate = function() { var tmpOptions = []; for (var i = 1; i <= $scope.optionsCount; i++) {if (window.CP.shouldStopExecution(1)){break;} tmpOptions.push({ text: i + "Option", id: i }); } window.CP.exitedLoop(1); var tmpComboBoxes = []; for (var j = 1; j <= $scope.comboBoxesCount; j++) {if (window.CP.shouldStopExecution(2)){break;} tmpComboBoxes.push({ selection: null }); } window.CP.exitedLoop(2); $scope.options = tmpOptions; $scope.comboBoxes = tmpComboBoxes; }; // this function implements pagination/lazy loading of the selection options for lesser UI latency and browser resources consumption var getData = function(optionsOrig, query, pageSize) { console.log(query); var results = []; var options = []; if(query.term) { var search = query.term.toLowerCase(); options = _.filter(optionsOrig, function(elem) { return elem.text.toLowerCase().indexOf(search) != -1; }); } else { options = optionsOrig; } var startPos = (query.page - 1) * pageSize; if (startPos > options.length) { startPos = options.length; } var endPos = startPos + pageSize; if (endPos > options.length) { endPos = options.length; } for (var i = startPos; i < endPos; i++) {if (window.CP.shouldStopExecution(3)){break;} results.push(options[i]); } window.CP.exitedLoop(3); var data = { more: endPos < options.length, results: results }; return data; }; // this function provide the options data in the select2 form $scope.select2options = function(options) { var s2options = { minimumResultsForSearch: 1, // no search box multiple: false, formatNoMatches: function(term) { return ""; }, query: function(query) { var data = getData(options, query, 10); query.callback(data); } }; return s2options; }; $scope.generate(); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Vue Argon Design System
Multi Select Tiled Layout
Button Dropdown Select
Select users

Questions / Comments: