├── .gitattributes ├── .gitignore ├── demo ├── remote.php ├── demo.css ├── names.json └── index.php ├── package.json ├── .github └── ISSUE_TEMPLATE │ ├── feature_request.yml │ └── bug_report.yml ├── README.md ├── LICENSE ├── dist ├── tokenize2.min.css └── tokenize2.min.js ├── tokenize2.css └── tokenize2.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * text eol=lf -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | web.config 2 | -------------------------------------------------------------------------------- /demo/remote.php: -------------------------------------------------------------------------------- 1 | $item['text'], 'text' => $item['text']); 14 | } 15 | } 16 | 17 | echo json_encode($ret); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tokenize2", 3 | "version": "1.3.5", 4 | "main": "/dist/tokenize2.min.js", 5 | "description": "Plugin which allows your users to select multiple items from a predefined list or ajax, using autocompletion as they type to find each item.", 6 | "homepage": "http://dragonofmercy.github.io/Tokenize2", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/dragonofmercy/Tokenize2.git" 10 | }, 11 | "keywords": [ 12 | "tokenizer", 13 | "tokeniser", 14 | "tokenize", 15 | "tokenise", 16 | "tags", 17 | "taggify", 18 | "keywords" 19 | ], 20 | "author": "DragonOfMercy ", 21 | "license": "BSD", 22 | "readmeFilename": "README.md", 23 | "dependencies": { 24 | "jquery": ">=3.4.0" 25 | } 26 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: "⭐ Feature / enhancement request" 2 | description: Propose something new. 3 | labels: 4 | - enhancement 5 | body: 6 | - type: textarea 7 | attributes: 8 | label: Is your feature request related to a problem? 9 | description: Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 10 | validations: 11 | required: true 12 | - type: textarea 13 | attributes: 14 | label: Describe the solution you'd like 15 | description: What is the scenario this would be used? 16 | validations: 17 | required: true 18 | - type: textarea 19 | attributes: 20 | label: Describe alternatives you've considered 21 | description: A clear and concise description of any alternative solutions or features you've considered. 22 | validations: 23 | required: false 24 | - type: textarea 25 | attributes: 26 | label: Additional context 27 | description: Add any other context or screenshots about the feature request here. 28 | validations: 29 | required: false 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: "🐛 Bug report" 2 | description: Report errors or unexpected behavior 3 | labels: 4 | - bug 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Please make sure to [search for existing issues](https://github.com/dragonofmercy/Tokenize2/issues) before filing a new one! 10 | 11 | - type: textarea 12 | attributes: 13 | label: Steps to reproduce 14 | description: We highly suggest including screenshots or code sample. 15 | placeholder: Tell us the steps required to trigger your bug. 16 | validations: 17 | required: true 18 | 19 | - type: textarea 20 | attributes: 21 | label: ✔️ Expected Behavior 22 | placeholder: What were you expecting? 23 | validations: 24 | required: false 25 | 26 | - type: textarea 27 | attributes: 28 | label: ❌ Actual Behavior 29 | placeholder: What happened instead? 30 | validations: 31 | required: false 32 | 33 | - type: textarea 34 | attributes: 35 | label: Bowser informations 36 | description: please complete the following information 37 | placeholder: | 38 | OS: [e.g. iOS] 39 | Browser [e.g. chrome, safari] 40 | Version [e.g. 22] 41 | validations: 42 | required: false 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Deprecation warning! 2 | This repository has been deprecated in favour of [TomSelect](https://tom-select.js.org). 3 | 4 | # Tokenize2 5 | 6 | [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://ko-fi.com/dragonofmercy) 7 | 8 | Tokenize2 is a plugin which allows your users to select multiple items from a predefined list or ajax, using autocompletion 9 | as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending 10 | messages on facebook or tags on tumblr. 11 | 12 | * Intuitive UI for selecting multiple items from a large list 13 | * Easy to skin / style purely in css, no images required 14 | * Supports any backend which can generate JSON, including PHP, Rails, Django, ASP.net 15 | * Events based 16 | * Select, delete and navigate items using the mouse or keyboard 17 | * Custom delimiters 18 | * Sortable items 19 | * jQuery 2+ 20 | * Bootstrap 3+ 21 | 22 | # Documentation 23 | 24 | The documentation for Tokenize2 is available [through GitHub Pages](https://dragonofmercy.github.io/Tokenize2/). 25 | 26 | ## 27 | 28 | If this project help to increase your productivity, you can give me a cup of coffee :) 29 | 30 | [![Donate](https://cdn.ko-fi.com/cdn/kofi2.png?v=3)](https://ko-fi.com/dragonofmercy) 31 | -------------------------------------------------------------------------------- /demo/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 12px; 3 | min-width: 320px; 4 | line-height: 18px; 5 | color: #555; 6 | background-color: #EFF1F2; 7 | } 8 | 9 | select { 10 | display: none; 11 | } 12 | 13 | h3 { 14 | font-size: 14px; 15 | font-weight: bold; 16 | } 17 | 18 | .navbar { 19 | background-color: #fff; 20 | -webkit-border-radius: 0 0 4px 4px; 21 | -moz-border-radius: 0 0 4px 4px; 22 | border-radius: 0 0 4px 4px; 23 | border-top: 0; 24 | border-color: #d3d8db 25 | } 26 | 27 | .navbar-default .navbar-brand { 28 | color: #555; 29 | } 30 | 31 | .panel { 32 | background-color: #fff; 33 | border: 1px solid #d3d8db; 34 | -webkit-border-radius: 4px; 35 | -moz-border-radius: 4px; 36 | border-radius: 4px; 37 | 38 | -webkit-box-shadow: none; 39 | -moz-box-shadow: none; 40 | box-shadow: none; 41 | } 42 | 43 | .panel > .panel-heading { 44 | padding: 0; 45 | position: relative; 46 | } 47 | 48 | .panel > .panel-heading:after { 49 | content: ''; 50 | display: block; 51 | position: absolute; 52 | height: 0; 53 | left: 10px; 54 | right: 10px; 55 | bottom: 0; 56 | border-bottom: 1px solid #eee; 57 | z-index: 10; 58 | } 59 | 60 | .panel > .panel-heading > .panel-title { 61 | font-size: 14px; 62 | line-height: 24px; 63 | padding: 6px 15px; 64 | font-weight: bold; 65 | } 66 | 67 | .panel > .panel-body { 68 | padding: 20px; 69 | } 70 | 71 | .no-mar { 72 | margin: 0; 73 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2005-2016, DragonOfMercy 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | * Neither the name of DragonOfMercy nor the names of its 15 | contributors may be used to endorse or promote products derived from this 16 | software without specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /dist/tokenize2.min.css: -------------------------------------------------------------------------------- 1 | .tokenize>.tokens-container{position:relative;list-style:none;padding:0 0 5px 5px;height:auto;min-height:34px;cursor:text}.tokenize>.tokens-container.disabled{background-color:#eee;cursor:not-allowed}.tokenize.focus>.tokens-container{outline:0;border-color:#66afe9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.tokenize>.tokens-container.input-sm{padding:0 0 4px 4px;min-height:30px}.tokenize>.tokens-container.input-lg{padding:0 0 9px 9px;min-height:46px}.tokenize>.tokens-container>.token{padding:0 1.2em 0 5px;background-color:#eff2f7;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.tokenize>.tokens-container>.token,.tokenize>.tokens-container>.placeholder,.tokenize>.tokens-container>.token-search{border:1px solid #cdd5e3;display:inline-block;margin:5px 5px 0 0;position:relative;vertical-align:middle}.tokenize>.tokens-container>.token-search{min-width:10px}.tokenize.sortable>.tokens-container>.token{cursor:move}.tokenize.sortable>.tokens-container>.token.dragged{position:absolute;z-index:2000}.tokenize.single>.tokens-container>.token{display:block;border-color:#fff;background-color:transparent}.tokenize.sortable>.tokens-container>.token.shadow{border-color:#ccc;background-color:#ccc;filter:alpha(opacity=50);opacity:.2}.tokenize>.tokens-container>.placeholder,.tokenize>.tokens-container>.token-search{padding:0;border-color:#fff}.tokenize>.tokens-container>.placeholder{color:#ccc}.tokenize>.tokens-container>.token-search>input{padding:0;margin:0;line-height:1em;border:1px solid #fff;background:transparent;border-left:0;border-right:0;outline:0;width:100%}.tokenize>.tokens-container>.token-search>input::-ms-clear{display:none}.tokenize>.tokens-container.input-sm>.placeholder,.tokenize>.tokens-container.input-sm>.token-search,.tokenize>.tokens-container.input-sm>.token{margin:4px 4px 0 0}.tokenize>.tokens-container.input-lg>.placeholder,.tokenize>.tokens-container.input-lg>.token-search,.tokenize>.tokens-container.input-lg>.token{margin:9px 9px 0 0}.tokenize>.tokens-container>.token.pending-delete{background-color:#5b72a4;border-color:#425c96;color:#fff}.tokenize>.tokens-container>.token>.dismiss{position:absolute;right:5px;color:#a9b9d8;text-decoration:none;cursor:pointer}.tokenize>.tokens-container>.token>.dismiss:after{content:"×"}.tokenize>.tokens-container>.token.pending-delete>.dismiss{color:#aaa}.tokenize-dropdown{position:absolute;display:none}.tokenize-dropdown>.dropdown-menu{min-height:10px;width:100%;display:block;margin:-1px 0 0 0;visibility:visible;opacity:1}.tokenize-dropdown>.dropdown-menu li{cursor:pointer}.tokenize-dropdown>.dropdown-menu li>a .tokenize-highlight{font-weight:bold}.tokenize-dropdown>.dropdown-menu li.locked{padding:3px 20px;color:#333;white-space:nowrap}.tokenize-dropdown>.dropdown-menu li.locked,.tokenize-dropdown>.dropdown-menu li>a{text-overflow:ellipsis;overflow-x:hidden}.tokenize-dropdown>.dropdown-menu li:not(.active) a:hover,.tokenize-dropdown>.dropdown-menu li:not(.active) a:focus{background-color:transparent} -------------------------------------------------------------------------------- /tokenize2.css: -------------------------------------------------------------------------------- 1 | .tokenize > .tokens-container { 2 | position: relative; 3 | list-style: none; 4 | padding: 0 0 5px 5px; 5 | height: auto; 6 | min-height: 34px; 7 | cursor: text; 8 | } 9 | 10 | .tokenize > .tokens-container.disabled { 11 | background-color: #eee; 12 | cursor: not-allowed; 13 | } 14 | 15 | .tokenize.focus > .tokens-container { 16 | outline: 0; 17 | border-color: #66afe9; 18 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 19 | box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 20 | } 21 | 22 | .tokenize > .tokens-container.input-sm { 23 | padding: 0 0 4px 4px; 24 | min-height: 30px; 25 | } 26 | 27 | .tokenize > .tokens-container.input-lg { 28 | padding: 0 0 9px 9px; 29 | min-height: 46px; 30 | } 31 | 32 | .tokenize > .tokens-container > .token { 33 | padding: 0 1.2em 0 5px; 34 | background-color: #eff2f7; 35 | -webkit-border-radius: 2px; 36 | -moz-border-radius: 2px; 37 | border-radius: 2px; 38 | } 39 | 40 | .tokenize > .tokens-container > .token, 41 | .tokenize > .tokens-container > .placeholder, 42 | .tokenize > .tokens-container > .token-search { 43 | border: 1px solid #cdd5e3; 44 | display: inline-block; 45 | margin: 5px 5px 0 0; 46 | position: relative; 47 | vertical-align: middle; 48 | } 49 | 50 | .tokenize > .tokens-container > .token-search { 51 | min-width: 10px; 52 | } 53 | 54 | .tokenize.sortable > .tokens-container > .token { 55 | cursor: move; 56 | } 57 | 58 | .tokenize.sortable > .tokens-container > .token.dragged { 59 | position: absolute; 60 | z-index: 2000; 61 | } 62 | 63 | .tokenize.single > .tokens-container > .token { 64 | display: block; 65 | border-color: #fff; 66 | background-color: transparent; 67 | } 68 | 69 | .tokenize.sortable > .tokens-container > .token.shadow { 70 | border-color: #ccc; 71 | background-color: #ccc; 72 | filter: alpha(opacity=50); 73 | opacity: .2; 74 | } 75 | 76 | .tokenize > .tokens-container > .placeholder, 77 | .tokenize > .tokens-container > .token-search { 78 | padding: 0; 79 | border-color: #fff; 80 | } 81 | .tokenize > .tokens-container > .placeholder { 82 | color: #ccc; 83 | } 84 | 85 | .tokenize > .tokens-container > .token-search > input { 86 | padding: 0; 87 | margin: 0; 88 | line-height: 1em; 89 | border: 1px solid #fff; 90 | background: transparent; 91 | border-left: none; 92 | border-right: none; 93 | outline: none; 94 | width: 100%; 95 | } 96 | 97 | .tokenize > .tokens-container > .token-search > input::-ms-clear { 98 | display: none; 99 | } 100 | 101 | .tokenize > .tokens-container.input-sm > .placeholder, 102 | .tokenize > .tokens-container.input-sm > .token-search, 103 | .tokenize > .tokens-container.input-sm > .token { 104 | margin: 4px 4px 0 0; 105 | } 106 | 107 | .tokenize > .tokens-container.input-lg > .placeholder, 108 | .tokenize > .tokens-container.input-lg > .token-search, 109 | .tokenize > .tokens-container.input-lg > .token { 110 | margin: 9px 9px 0 0; 111 | } 112 | 113 | .tokenize > .tokens-container > .token.pending-delete { 114 | background-color: #5b72a4; 115 | border-color: #425c96; 116 | color: #fff 117 | } 118 | 119 | .tokenize > .tokens-container > .token > .dismiss { 120 | position: absolute; 121 | right: 5px; 122 | color: #a9b9d8; 123 | text-decoration: none; 124 | cursor: pointer; 125 | } 126 | 127 | .tokenize > .tokens-container > .token > .dismiss:after { 128 | content: "×"; 129 | } 130 | 131 | .tokenize > .tokens-container > .token.pending-delete > .dismiss { 132 | color: #aaa; 133 | } 134 | 135 | .tokenize-dropdown { 136 | position: absolute; 137 | display: none; 138 | } 139 | 140 | .tokenize-dropdown > .dropdown-menu { 141 | min-height: 10px; 142 | width: 100%; 143 | display: block; 144 | margin: -1px 0 0 0; 145 | visibility: visible; 146 | opacity: 1; 147 | } 148 | 149 | .tokenize-dropdown > .dropdown-menu li { 150 | cursor: pointer; 151 | } 152 | 153 | .tokenize-dropdown > .dropdown-menu li > a .tokenize-highlight { 154 | font-weight: bold; 155 | } 156 | 157 | .tokenize-dropdown > .dropdown-menu li.locked { 158 | padding: 3px 20px; 159 | color: #333; 160 | white-space: nowrap; 161 | } 162 | 163 | .tokenize-dropdown > .dropdown-menu li.locked, 164 | .tokenize-dropdown > .dropdown-menu li > a { 165 | text-overflow: ellipsis; 166 | overflow-x: hidden; 167 | } 168 | 169 | .tokenize-dropdown > .dropdown-menu li:not(.active) a:hover, 170 | .tokenize-dropdown > .dropdown-menu li:not(.active) a:focus { 171 | background-color: transparent; 172 | } -------------------------------------------------------------------------------- /demo/names.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"text": "Afghanistan", "value": "AF"}, 3 | {"text": "Åland Islands", "value": "AX"}, 4 | {"text": "Albania", "value": "AL"}, 5 | {"text": "Algeria", "value": "DZ"}, 6 | {"text": "American Samoa", "value": "AS"}, 7 | {"text": "Andorra", "value": "AD"}, 8 | {"text": "Angola", "value": "AO"}, 9 | {"text": "Anguilla", "value": "AI"}, 10 | {"text": "Antarctica", "value": "AQ"}, 11 | {"text": "Antigua and Barbuda", "value": "AG"}, 12 | {"text": "Argentina", "value": "AR"}, 13 | {"text": "Armenia", "value": "AM"}, 14 | {"text": "Aruba", "value": "AW"}, 15 | {"text": "Australia", "value": "AU"}, 16 | {"text": "Austria", "value": "AT"}, 17 | {"text": "Azerbaijan", "value": "AZ"}, 18 | {"text": "Bahamas", "value": "BS"}, 19 | {"text": "Bahrain", "value": "BH"}, 20 | {"text": "Bangladesh", "value": "BD"}, 21 | {"text": "Barbados", "value": "BB"}, 22 | {"text": "Belarus", "value": "BY"}, 23 | {"text": "Belgium", "value": "BE"}, 24 | {"text": "Belize", "value": "BZ"}, 25 | {"text": "Benin", "value": "BJ"}, 26 | {"text": "Bermuda", "value": "BM"}, 27 | {"text": "Bhutan", "value": "BT"}, 28 | {"text": "Bolivia", "value": "BO"}, 29 | {"text": "Bosnia and Herzegovina", "value": "BA"}, 30 | {"text": "Botswana", "value": "BW"}, 31 | {"text": "Bouvet Island", "value": "BV"}, 32 | {"text": "Brazil", "value": "BR"}, 33 | {"text": "British Indian Ocean Territory", "value": "IO"}, 34 | {"text": "Brunei Darussalam", "value": "BN"}, 35 | {"text": "Bulgaria", "value": "BG"}, 36 | {"text": "Burkina Faso", "value": "BF"}, 37 | {"text": "Burundi", "value": "BI"}, 38 | {"text": "Cambodia", "value": "KH"}, 39 | {"text": "Cameroon", "value": "CM"}, 40 | {"text": "Canada", "value": "CA"}, 41 | {"text": "Cape Verde", "value": "CV"}, 42 | {"text": "Cayman Islands", "value": "KY"}, 43 | {"text": "Central African Republic", "value": "CF"}, 44 | {"text": "Chad", "value": "TD"}, 45 | {"text": "Chile", "value": "CL"}, 46 | {"text": "China", "value": "CN"}, 47 | {"text": "Christmas Island", "value": "CX"}, 48 | {"text": "Cocos (Keeling) Islands", "value": "CC"}, 49 | {"text": "Colombia", "value": "CO"}, 50 | {"text": "Comoros", "value": "KM"}, 51 | {"text": "Congo", "value": "CG"}, 52 | {"text": "Congo, The Democratic Republic of the", "value": "CD"}, 53 | {"text": "Cook Islands", "value": "CK"}, 54 | {"text": "Costa Rica", "value": "CR"}, 55 | {"text": "Cote D\"Ivoire", "value": "CI"}, 56 | {"text": "Croatia", "value": "HR"}, 57 | {"text": "Cuba", "value": "CU"}, 58 | {"text": "Cyprus", "value": "CY"}, 59 | {"text": "Czech Republic", "value": "CZ"}, 60 | {"text": "Denmark", "value": "DK"}, 61 | {"text": "Djibouti", "value": "DJ"}, 62 | {"text": "Dominica", "value": "DM"}, 63 | {"text": "Dominican Republic", "value": "DO"}, 64 | {"text": "Ecuador", "value": "EC"}, 65 | {"text": "Egypt", "value": "EG"}, 66 | {"text": "El Salvador", "value": "SV"}, 67 | {"text": "Equatorial Guinea", "value": "GQ"}, 68 | {"text": "Eritrea", "value": "ER"}, 69 | {"text": "Estonia", "value": "EE"}, 70 | {"text": "Ethiopia", "value": "ET"}, 71 | {"text": "Falkland Islands (Malvinas)", "value": "FK"}, 72 | {"text": "Faroe Islands", "value": "FO"}, 73 | {"text": "Fiji", "value": "FJ"}, 74 | {"text": "Finland", "value": "FI"}, 75 | {"text": "France", "value": "FR"}, 76 | {"text": "French Guiana", "value": "GF"}, 77 | {"text": "French Polynesia", "value": "PF"}, 78 | {"text": "French Southern Territories", "value": "TF"}, 79 | {"text": "Gabon", "value": "GA"}, 80 | {"text": "Gambia", "value": "GM"}, 81 | {"text": "Georgia", "value": "GE"}, 82 | {"text": "Germany", "value": "DE"}, 83 | {"text": "Ghana", "value": "GH"}, 84 | {"text": "Gibraltar", "value": "GI"}, 85 | {"text": "Greece", "value": "GR"}, 86 | {"text": "Greenland", "value": "GL"}, 87 | {"text": "Grenada", "value": "GD"}, 88 | {"text": "Guadeloupe", "value": "GP"}, 89 | {"text": "Guam", "value": "GU"}, 90 | {"text": "Guatemala", "value": "GT"}, 91 | {"text": "Guernsey", "value": "GG"}, 92 | {"text": "Guinea", "value": "GN"}, 93 | {"text": "Guinea-Bissau", "value": "GW"}, 94 | {"text": "Guyana", "value": "GY"}, 95 | {"text": "Haiti", "value": "HT"}, 96 | {"text": "Heard Island and Mcdonald Islands", "value": "HM"}, 97 | {"text": "Holy See (Vatican City State)", "value": "VA"}, 98 | {"text": "Honduras", "value": "HN"}, 99 | {"text": "Hong Kong", "value": "HK"}, 100 | {"text": "Hungary", "value": "HU"}, 101 | {"text": "Iceland", "value": "IS"}, 102 | {"text": "India", "value": "IN"}, 103 | {"text": "Indonesia", "value": "ID"}, 104 | {"text": "Iran, Islamic Republic Of", "value": "IR"}, 105 | {"text": "Iraq", "value": "IQ"}, 106 | {"text": "Ireland", "value": "IE"}, 107 | {"text": "Isle of Man", "value": "IM"}, 108 | {"text": "Israel", "value": "IL"}, 109 | {"text": "Italy", "value": "IT"}, 110 | {"text": "Jamaica", "value": "JM"}, 111 | {"text": "Japan", "value": "JP"}, 112 | {"text": "Jersey", "value": "JE"}, 113 | {"text": "Jordan", "value": "JO"}, 114 | {"text": "Kazakhstan", "value": "KZ"}, 115 | {"text": "Kenya", "value": "KE"}, 116 | {"text": "Kiribati", "value": "KI"}, 117 | {"text": "Korea, Democratic People\"S Republic of", "value": "KP"}, 118 | {"text": "Korea, Republic of", "value": "KR"}, 119 | {"text": "Kuwait", "value": "KW"}, 120 | {"text": "Kyrgyzstan", "value": "KG"}, 121 | {"text": "Lao People\"S Democratic Republic", "value": "LA"}, 122 | {"text": "Latvia", "value": "LV"}, 123 | {"text": "Lebanon", "value": "LB"}, 124 | {"text": "Lesotho", "value": "LS"}, 125 | {"text": "Liberia", "value": "LR"}, 126 | {"text": "Libyan Arab Jamahiriya", "value": "LY"}, 127 | {"text": "Liechtenstein", "value": "LI"}, 128 | {"text": "Lithuania", "value": "LT"}, 129 | {"text": "Luxembourg", "value": "LU"}, 130 | {"text": "Macao", "value": "MO"}, 131 | {"text": "Macedonia, The Former Yugoslav Republic of", "value": "MK"}, 132 | {"text": "Madagascar", "value": "MG"}, 133 | {"text": "Malawi", "value": "MW"}, 134 | {"text": "Malaysia", "value": "MY"}, 135 | {"text": "Maldives", "value": "MV"}, 136 | {"text": "Mali", "value": "ML"}, 137 | {"text": "Malta", "value": "MT"}, 138 | {"text": "Marshall Islands", "value": "MH"}, 139 | {"text": "Martinique", "value": "MQ"}, 140 | {"text": "Mauritania", "value": "MR"}, 141 | {"text": "Mauritius", "value": "MU"}, 142 | {"text": "Mayotte", "value": "YT"}, 143 | {"text": "Mexico", "value": "MX"}, 144 | {"text": "Micronesia, Federated States of", "value": "FM"}, 145 | {"text": "Moldova, Republic of", "value": "MD"}, 146 | {"text": "Monaco", "value": "MC"}, 147 | {"text": "Mongolia", "value": "MN"}, 148 | {"text": "Montserrat", "value": "MS"}, 149 | {"text": "Morocco", "value": "MA"}, 150 | {"text": "Mozambique", "value": "MZ"}, 151 | {"text": "Myanmar", "value": "MM"}, 152 | {"text": "Namibia", "value": "NA"}, 153 | {"text": "Nauru", "value": "NR"}, 154 | {"text": "Nepal", "value": "NP"}, 155 | {"text": "Netherlands", "value": "NL"}, 156 | {"text": "Netherlands Antilles", "value": "AN"}, 157 | {"text": "New Caledonia", "value": "NC"}, 158 | {"text": "New Zealand", "value": "NZ"}, 159 | {"text": "Nicaragua", "value": "NI"}, 160 | {"text": "Niger", "value": "NE"}, 161 | {"text": "Nigeria", "value": "NG"}, 162 | {"text": "Niue", "value": "NU"}, 163 | {"text": "Norfolk Island", "value": "NF"}, 164 | {"text": "Northern Mariana Islands", "value": "MP"}, 165 | {"text": "Norway", "value": "NO"}, 166 | {"text": "Oman", "value": "OM"}, 167 | {"text": "Pakistan", "value": "PK"}, 168 | {"text": "Palau", "value": "PW"}, 169 | {"text": "Palestinian Territory, Occupied", "value": "PS"}, 170 | {"text": "Panama", "value": "PA"}, 171 | {"text": "Papua New Guinea", "value": "PG"}, 172 | {"text": "Paraguay", "value": "PY"}, 173 | {"text": "Peru", "value": "PE"}, 174 | {"text": "Philippines", "value": "PH"}, 175 | {"text": "Pitcairn", "value": "PN"}, 176 | {"text": "Poland", "value": "PL"}, 177 | {"text": "Portugal", "value": "PT"}, 178 | {"text": "Puerto Rico", "value": "PR"}, 179 | {"text": "Qatar", "value": "QA"}, 180 | {"text": "Reunion", "value": "RE"}, 181 | {"text": "Romania", "value": "RO"}, 182 | {"text": "Russian Federation", "value": "RU"}, 183 | {"text": "Rwanda", "value": "RW"}, 184 | {"text": "Saint Helena", "value": "SH"}, 185 | {"text": "Saint Kitts and Nevis", "value": "KN"}, 186 | {"text": "Saint Lucia", "value": "LC"}, 187 | {"text": "Saint Pierre and Miquelon", "value": "PM"}, 188 | {"text": "Saint Vincent and the Grenadines", "value": "VC"}, 189 | {"text": "Samoa", "value": "WS"}, 190 | {"text": "San Marino", "value": "SM"}, 191 | {"text": "Sao Tome and Principe", "value": "ST"}, 192 | {"text": "Saudi Arabia", "value": "SA"}, 193 | {"text": "Senegal", "value": "SN"}, 194 | {"text": "Serbia and Montenegro", "value": "CS"}, 195 | {"text": "Seychelles", "value": "SC"}, 196 | {"text": "Sierra Leone", "value": "SL"}, 197 | {"text": "Singapore", "value": "SG"}, 198 | {"text": "Slovakia", "value": "SK"}, 199 | {"text": "Slovenia", "value": "SI"}, 200 | {"text": "Solomon Islands", "value": "SB"}, 201 | {"text": "Somalia", "value": "SO"}, 202 | {"text": "South Africa", "value": "ZA"}, 203 | {"text": "South Georgia and the South Sandwich Islands", "value": "GS"}, 204 | {"text": "Spain", "value": "ES"}, 205 | {"text": "Sri Lanka", "value": "LK"}, 206 | {"text": "Sudan", "value": "SD"}, 207 | {"text": "Suriname", "value": "SR"}, 208 | {"text": "Svalbard and Jan Mayen", "value": "SJ"}, 209 | {"text": "Swaziland", "value": "SZ"}, 210 | {"text": "Sweden", "value": "SE"}, 211 | {"text": "Switzerland", "value": "CH"}, 212 | {"text": "Syrian Arab Republic", "value": "SY"}, 213 | {"text": "Taiwan, Province of China", "value": "TW"}, 214 | {"text": "Tajikistan", "value": "TJ"}, 215 | {"text": "Tanzania, United Republic of", "value": "TZ"}, 216 | {"text": "Thailand", "value": "TH"}, 217 | {"text": "Timor-Leste", "value": "TL"}, 218 | {"text": "Togo", "value": "TG"}, 219 | {"text": "Tokelau", "value": "TK"}, 220 | {"text": "Tonga", "value": "TO"}, 221 | {"text": "Trinidad and Tobago", "value": "TT"}, 222 | {"text": "Tunisia", "value": "TN"}, 223 | {"text": "Turkey", "value": "TR"}, 224 | {"text": "Turkmenistan", "value": "TM"}, 225 | {"text": "Turks and Caicos Islands", "value": "TC"}, 226 | {"text": "Tuvalu", "value": "TV"}, 227 | {"text": "Uganda", "value": "UG"}, 228 | {"text": "Ukraine", "value": "UA"}, 229 | {"text": "United Arab Emirates", "value": "AE"}, 230 | {"text": "United Kingdom", "value": "GB"}, 231 | {"text": "United States", "value": "US"}, 232 | {"text": "United States Minor Outlying Islands", "value": "UM"}, 233 | {"text": "Uruguay", "value": "UY"}, 234 | {"text": "Uzbekistan", "value": "UZ"}, 235 | {"text": "Vanuatu", "value": "VU"}, 236 | {"text": "Venezuela", "value": "VE"}, 237 | {"text": "Viet Nam", "value": "VN"}, 238 | {"text": "Virgin Islands, British", "value": "VG"}, 239 | {"text": "Virgin Islands, U.S.", "value": "VI"}, 240 | {"text": "Wallis and Futuna", "value": "WF"}, 241 | {"text": "Western Sahara", "value": "EH"}, 242 | {"text": "Yemen", "value": "YE"}, 243 | {"text": "Zambia", "value": "ZM"}, 244 | {"text": "Zimbabwe", "value": "ZW"} 245 | ] -------------------------------------------------------------------------------- /demo/index.php: -------------------------------------------------------------------------------- 1 | ' . $item['text'] . ''; 6 | } 7 | return $output; 8 | } 9 | ?> 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Tokenize2 demo 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | 38 | 39 |
40 | 41 |
42 |
43 |
44 |

Default usage

45 |
46 |
47 | 50 |
51 |
52 |
53 | 54 |
55 |
56 |
57 |

Remote data source

58 |
59 |
60 | 61 |
62 |
63 |
64 | 65 |
66 |
67 | 68 |
69 |
70 |
71 |

Limit the number of tokens

72 |
73 |
74 | 77 |
78 |
79 |
80 | 81 |
82 |
83 |
84 |

One token behavior

85 |
86 |
87 | 90 |
91 |
92 |
93 | 94 |
95 |
96 | 97 |
98 |
99 |
100 |

Sortable tokens

101 |
102 |
103 | 106 |
107 |
108 |
109 | 110 |
111 |
112 |
113 |

Placeholder

114 |
115 |
116 | 119 |
120 |
121 |
122 | 123 |
124 |
125 | 126 |
127 |
128 |
129 |

Custom tokens allowed

130 |
131 |
132 | 135 |
136 |
137 |
138 | 139 |
140 |
141 |
142 |

Custom dataSource (callable)

143 |
144 |
145 | 146 |
147 |
148 |
149 | 150 |
151 |
152 | 153 |
154 |
155 |
156 |

Override dropdownItemFormat function

157 |
158 |
159 | 162 |
163 |
164 |
165 | 166 |
167 |
168 |
169 |

Tokenize in modal

170 |
171 |
172 | 173 |
174 |
175 |
176 |
177 | 178 |
179 | 180 |
181 | 182 |
183 |
184 |
185 |

Disabled

186 |
187 |
188 | 191 |
192 |
193 |
194 | 195 |
196 |
197 |
198 |

Events test

199 |
200 |
201 | 204 |
205 |
206 |
207 | 208 |
209 | 210 | 227 | 228 | 293 | 294 |
295 | 296 | 297 | -------------------------------------------------------------------------------- /dist/tokenize2.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Tokenize2 v1.3.6 (https://github.com/dragonofmercy/Tokenize2) 3 | * Copyright 2016-2017 DragonOfMercy. 4 | * Licensed under the new BSD license 5 | */ 6 | (function(a){if(typeof define==="function"&&define.amd){define(["jquery"],a)}else{if(typeof module==="object"&&module.exports){module.exports=function(b,c){if(c===undefined){if(typeof window!=="undefined"){c=require("jquery")}else{c=require("jquery")(b)}}a(c);return c}}else{a(jQuery)}}}(function(e){var c=function(g,f){this.control=false;this.element=e(g);this.options=e.extend({},c.DEFAULTS,f);this.options.tabIndex=this.options.tabIndex===-1?0:this.options.tabIndex;this.options.sortable=this.options.tokensMaxItems===1?false:this.options.sortable;this.bind();this.trigger("tokenize:load")};var a={BACKSPACE:8,TAB:9,ENTER:13,ESCAPE:27,ARROW_UP:38,ARROW_DOWN:40,CTRL:17,MAJ:16,A:65};c.VERSION="1.3.6";c.DEBOUNCE=null;c.DEFAULTS={tokensMaxItems:0,tokensAllowCustom:false,dropdownMaxItems:10,dropdownSelectFirstItem:true,searchMinLength:0,searchMaxLength:0,searchFromStart:true,searchHighlight:true,displayNoResultsMessage:false,noResultsMessageText:'No results mached "%s"',delimiter:",",dataSource:"select",debounce:0,placeholder:false,sortable:false,allowEmptyValues:false,zIndexMargin:500,tabIndex:0};c.prototype.trigger=function(h,i,g,f){this.element.trigger(h,i,g,f)};c.prototype.bind=function(){this.element.on("tokenize:load",{},e.proxy(function(){this.init()},this)).on("tokenize:clear",{},e.proxy(function(){this.clear()},this)).on("tokenize:remap",{},e.proxy(function(){this.remap()},this)).on("tokenize:select",{},e.proxy(function(f,g){this.focus(g)},this)).on("tokenize:deselect",{},e.proxy(function(){this.blur()},this)).on("tokenize:search",{},e.proxy(function(g,f){this.find(f)},this)).on("tokenize:paste",{},e.proxy(function(){this.paste()},this)).on("tokenize:dropdown:up",{},e.proxy(function(){this.dropdownSelectionMove(-1)},this)).on("tokenize:dropdown:down",{},e.proxy(function(){this.dropdownSelectionMove(1)},this)).on("tokenize:dropdown:clear",{},e.proxy(function(){this.dropdownClear()},this)).on("tokenize:dropdown:show",{},e.proxy(function(){this.dropdownShow()},this)).on("tokenize:dropdown:hide",{},e.proxy(function(){this.dropdownHide()},this)).on("tokenize:dropdown:fill",{},e.proxy(function(g,f){this.dropdownFill(f)},this)).on("tokenize:dropdown:itemAdd",{},e.proxy(function(g,f){this.dropdownAddItem(f)},this)).on("tokenize:keypress",{},e.proxy(function(g,f){this.keypress(f)},this)).on("tokenize:keydown",{},e.proxy(function(g,f){this.keydown(f)},this)).on("tokenize:keyup",{},e.proxy(function(g,f){this.keyup(f)},this)).on("tokenize:tokens:reorder",{},e.proxy(function(){this.reorder()},this)).on("tokenize:tokens:add",{},e.proxy(function(h,f,g,i){this.tokenAdd(f,g,i)},this)).on("tokenize:tokens:remove",{},e.proxy(function(g,f){this.tokenRemove(f)},this))};c.prototype.init=function(){this.id=this.guid();this.element.hide();if(!this.element.attr("multiple")){console.error("Attribute multiple is missing, tokenize2 can be buggy !")}this.dropdown=undefined;this.searchContainer=e('
  • ');this.input=e('').on("keydown",{},e.proxy(function(f){this.trigger("tokenize:keydown",[f])},this)).on("keypress",{},e.proxy(function(f){this.trigger("tokenize:keypress",[f])},this)).on("keyup",{},e.proxy(function(f){this.trigger("tokenize:keyup",[f])},this)).on("focus",{},e.proxy(function(){if(this.input.val().length>=this.options.searchMinLength&&this.input.val().length>0){this.trigger("tokenize:search",[this.input.val()])}},this)).on("paste",{},e.proxy(function(){if(this.options.tokensAllowCustom){setTimeout(e.proxy(function(){this.trigger("tokenize:paste")},this),10)}},this));if(this.options.searchMaxLength>0){this.input.attr("maxlength",this.options.searchMaxLength)}this.tokensContainer=e('