├── .build_css.php ├── .editorconfig ├── .gitignore ├── 00_scrap └── jquery_api_usage.xlsx ├── LICENSE.md ├── README.md ├── component.json ├── data ├── docs.json ├── examples.json └── releases.json ├── examples ├── 1000.html ├── 1000.js ├── 1002.html ├── 1002.js ├── 1003.html ├── 1003.js ├── 1007.html ├── 1007.js ├── 1045.html ├── 1045.js ├── 2000.html ├── 2000.js ├── 2001.html ├── 2001.js ├── 2002.html ├── 2002.js ├── 2003.html ├── 2003.js ├── 2004.html ├── 2004.js ├── 2020.html ├── 2020.js ├── 2021.html ├── 2021.js ├── 3000.html ├── 3000.js ├── 3001.html ├── 3001.js ├── 3005.html ├── 3005.js ├── 3012.html ├── 3012.js ├── 3015.html ├── 3015.js ├── 3016.html ├── 3016.js ├── 3031.html ├── 3031.js ├── 3088.html ├── 3088.js ├── 4001.html ├── 4001.js ├── 4003.html ├── 4003.js ├── 4008.html ├── 4008.js ├── 4011.html ├── 4011.js ├── 4014.html ├── 4014.js ├── 4033.html ├── 4033.js ├── 4034.html ├── 4034.js ├── 4037.html ├── 4037.js ├── 4041.html ├── 4041.js ├── 4042.html ├── 4042.js ├── 4055.html ├── 4055.js ├── 4072.html ├── 4072.js ├── 5022.html ├── 5022.js ├── 6000.html ├── 6000.js ├── 6001.html ├── 6001.js ├── 7000.html ├── 7000.js ├── 7001.html ├── 7001.js ├── 7002.html ├── 7002.js ├── 7003.html ├── 7003.js ├── 7004.html ├── 7004.js ├── 7005.html ├── 7005.js ├── 7006.html ├── 7006.js ├── 7007.html ├── 7007.js ├── 7008.html ├── 7008.js ├── 7009.html ├── 7009.js ├── 7010.html ├── 7010.js ├── 7011.html ├── 7011.js ├── 7056.html ├── 7056.js ├── 8002.html ├── 8002.js ├── 9000.html ├── 9000.js ├── 9001.html └── 9001.js ├── pages ├── 404.php ├── docs.php ├── download.php ├── examples.php ├── footer.php ├── header.php ├── home.php ├── markup.php ├── single_example.php └── themes.php ├── php ├── AC.php └── less.inc.php └── www ├── api ├── birds.json ├── birds.php ├── buggy.php ├── cities.php ├── countries.json ├── countries.php ├── mammals.json ├── mammals.php ├── reptiles.json ├── reptiles.php ├── secret_users.php ├── states.php ├── texas_cities.json └── us_states.json ├── css ├── autocomplete.css ├── bootstrap-2.3.0.min.css ├── datepicker.css ├── foundation-3.2.5.min.css ├── less-1.3.0.min.js ├── prettify.less ├── site.css └── site.less ├── example.config.php ├── example.htaccess ├── img ├── glyphicons-halflings-white.png ├── glyphicons-halflings.png └── satinweave.png ├── index.php ├── js ├── autocomplete.js ├── bootstrap-datepicker.js ├── jquery-1.8.2.min.js ├── jquery.color.min.js ├── json3.min.js └── prettify.js └── releases ├── 0.1.0 ├── LICENSE.txt ├── autocomplete-0.1.0.css ├── autocomplete-0.1.0.js ├── autocomplete-0.1.0.min.css ├── autocomplete-0.1.0.min.js └── autocomplete-0.1.0.zip ├── 0.2.0 ├── LICENSE.txt ├── autocomplete-0.2.0.css ├── autocomplete-0.2.0.js ├── autocomplete-0.2.0.min.css ├── autocomplete-0.2.0.min.js ├── autocomplete-0.2.0.zip └── docs │ ├── autocomplete-0.2.0-docs.html │ └── autocomplete-0.2.0-docs_files │ ├── jquery-1.8.2.min.js │ └── jquery.color.min.js ├── 0.2.1 ├── LICENSE.txt ├── autocomplete-0.2.1.css ├── autocomplete-0.2.1.js ├── autocomplete-0.2.1.min.css ├── autocomplete-0.2.1.min.js ├── autocomplete-0.2.1.zip └── docs │ ├── autocomplete-0.2.1-docs.html │ └── autocomplete-0.2.1-docs_files │ ├── jquery-1.8.2.min.js │ └── jquery.color.min.js └── 0.3.0 ├── LICENSE.txt ├── autocomplete-0.3.0.css ├── autocomplete-0.3.0.js ├── autocomplete-0.3.0.min.css ├── autocomplete-0.3.0.min.js └── autocomplete-0.3.0.zip /.build_css.php: -------------------------------------------------------------------------------- 1 | compileFile($f, $cssFileName); 19 | } 20 | catch (exception $e) { 21 | echo "\n\n".'Failed to compile LESS file "'.$f.'". Do you have errors in your syntax? Exiting...'."\n\n"; 22 | die; 23 | } 24 | 25 | echo 'done'."\n"; 26 | } 27 | 28 | die; 29 | 30 | ?> 31 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs. 2 | # More information at http://EditorConfig.org 3 | 4 | # Do not check for any .editorconfig files above this directory 5 | root = true 6 | 7 | # All files 8 | [*] 9 | charset = utf-8 10 | end_of_line = lf 11 | indent_size = 2 12 | indent_style = space 13 | insert_final_newline = true 14 | trim_trailing_whitespace = true 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | www/.htaccess 2 | www/.config.php 3 | *.diff 4 | -------------------------------------------------------------------------------- /00_scrap/jquery_api_usage.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oakmac/autocompletejs/b4ee22803e6baaf5c0006b5f7ac9872403238e93/00_scrap/jquery_api_usage.xlsx -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright 2013 Chris Oakman 2 | http://autocompletejs.com/ 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining 5 | a copy of this software and associated documentation files (the 6 | "Software"), to deal in the Software without restriction, including 7 | without limitation the rights to use, copy, modify, merge, publish, 8 | distribute, sublicense, and/or sell copies of the Software, and to 9 | permit persons to whom the Software is furnished to do so, subject to 10 | the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [AutoCompleteJS](http://autocompletejs.com) 2 | 3 | AutoCompleteJS is a JavaScript widget you can use to implement [autocomplete](http://en.wikipedia.org/wiki/Autocomplete) 4 | on your website or web application. 5 | 6 | Read more on the website: 7 | 8 | * [Docs](http://autocompletejs.com/docs) 9 | * [Examples](http://autocompletejs.com/examples) 10 | * [Download](http://autocompletejs.com/download) -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AutoCompleteJS", 3 | "version": "0.2.1", 4 | "description": "AutoCompleteJS is a JavaScript widget that helps your users find things quickly.", 5 | "main": [ 6 | "./releases/0.2.1/autocomplete-0.2.1.min.js", 7 | "./releases/0.2.1/autocomplete-0.2.1.min.css" 8 | ], 9 | "homepage": "http://autocompletejs.com/", 10 | "dependencies": { 11 | "jquery": ">= 1.4.2" 12 | }, 13 | "keywords": [ 14 | "autocomplete", 15 | "autosuggest", 16 | "tokeninput", 17 | "input" 18 | ], 19 | "author": { 20 | "name": "Chris Oakman" 21 | }, 22 | "license": [ 23 | "http://www.opensource.org/licenses/mit-license.php" 24 | ] 25 | } -------------------------------------------------------------------------------- /data/examples.json: -------------------------------------------------------------------------------- 1 | [ 2 | "-----------------------------------------------------", 3 | { 4 | "group": "Basic Usage", 5 | "number": 1000, 6 | "name": "Simple List" 7 | }, 8 | { 9 | "group": "Basic Usage", 10 | "number": 1002, 11 | "name": "Nested Lists 1" 12 | }, 13 | { 14 | "group": "Basic Usage", 15 | "number": 1007, 16 | "name": "Nested Lists 2" 17 | }, 18 | { 19 | "group": "Basic Usage", 20 | "number": 1003, 21 | "name": "Nested Lists 3" 22 | }, 23 | { 24 | "group": "Basic Usage", 25 | "number": 1045, 26 | "name": "Multiple Widgets" 27 | }, 28 | "-----------------------------------------------------", 29 | { 30 | "group": "AJAX", 31 | "number": 2000, 32 | "name": "Simple AJAX" 33 | }, 34 | { 35 | "group": "AJAX", 36 | "number": 2001, 37 | "name": "AJAX with local Options" 38 | }, 39 | { 40 | "group": "AJAX", 41 | "number": 2002, 42 | "name": "Nested Lists with AJAX" 43 | }, 44 | { 45 | "group": "AJAX", 46 | "number": 2003, 47 | "name": "AJAX with preProcess function" 48 | }, 49 | { 50 | "group": "AJAX", 51 | "number": 2004, 52 | "name": "AJAX using POST" 53 | }, 54 | { 55 | "group": "AJAX", 56 | "number": 2020, 57 | "name": "cache AJAX" 58 | }, 59 | { 60 | "group": "AJAX", 61 | "number": 2021, 62 | "name": "cache AJAX length" 63 | }, 64 | "-----------------------------------------------------", 65 | { 66 | "group": "Initial Config", 67 | "number": 3000, 68 | "name": "initialValue" 69 | }, 70 | { 71 | "group": "Initial Config", 72 | "number": 3001, 73 | "name": "maxTokenGroups" 74 | }, 75 | { 76 | "group": "Initial Config", 77 | "number": 3005, 78 | "name": "placeholderHTML" 79 | }, 80 | { 81 | "group": "Initial Config", 82 | "number": 3012, 83 | "name": "showErrors console.log" 84 | }, 85 | { 86 | "group": "Initial Config", 87 | "number": 3088, 88 | "name": "showErrors alert", 89 | "hidden":true 90 | }, 91 | { 92 | "group": "Initial Config", 93 | "number": 3031, 94 | "name": "showErrors custom" 95 | }, 96 | { 97 | "group": "Initial Config", 98 | "number": 3015, 99 | "name": "tokenSeparatorHTML string" 100 | }, 101 | { 102 | "group": "Initial Config", 103 | "number": 3016, 104 | "name": "tokenSeparatorHTML function" 105 | }, 106 | "-----------------------------------------------------", 107 | { 108 | "group": "List Config", 109 | "number": 4055, 110 | "name": "ajaxErrorHTML string" 111 | }, 112 | { 113 | "group": "List Config", 114 | "number": 4072, 115 | "name": "ajaxErrorHTML function" 116 | }, 117 | { 118 | "group": "List Config", 119 | "number": 4011, 120 | "name": "ajaxLoadingHTML string" 121 | }, 122 | { 123 | "group": "List Config", 124 | "number": 4037, 125 | "name": "ajaxLoadingHTML function" 126 | }, 127 | { 128 | "group": "List Config", 129 | "number": 4014, 130 | "name": "Basic allowFreeform" 131 | }, 132 | { 133 | "group": "List Config", 134 | "number": 4001, 135 | "name": "allowFreeform Multiple Lists" 136 | }, 137 | { 138 | "group": "List Config", 139 | "number": 4002, 140 | "name": "cacheAjax" 141 | }, 142 | { 143 | "group": "List Config", 144 | "number": 4003, 145 | "name": "children on List Object" 146 | }, 147 | { 148 | "group": "List Config", 149 | "number": 4041, 150 | "name": "matchOptions" 151 | }, 152 | { 153 | "group": "List Config", 154 | "number": 4007, 155 | "name": "noResultsHTML" 156 | }, 157 | { 158 | "group": "List Config", 159 | "number": 4033, 160 | "name": "optionHTML string" 161 | }, 162 | { 163 | "group": "List Config", 164 | "number": 4034, 165 | "name": "optionHTML and tokenHTML as functions" 166 | }, 167 | { 168 | "group": "List Config", 169 | "number": 4009, 170 | "name": "tokenHTML" 171 | }, 172 | { 173 | "group": "List Config", 174 | "number": 4013, 175 | "name": "options" 176 | }, 177 | "-----------------------------------------------------", 178 | { 179 | "group": "Option Config", 180 | "number": 5022, 181 | "name": "children override on Option Object" 182 | }, 183 | { 184 | "group": "Option Config", 185 | "number": 5000, 186 | "name": "children" 187 | }, 188 | { 189 | "group": "Option Config", 190 | "number": 5001, 191 | "name": "group" 192 | }, 193 | { 194 | "group": "Option Config", 195 | "number": 5002, 196 | "name": "optionHTML" 197 | }, 198 | { 199 | "group": "Option Config", 200 | "number": 5003, 201 | "name": "tokenHTML" 202 | }, 203 | { 204 | "group": "Option Config", 205 | "number": 5004, 206 | "name": "value" 207 | }, 208 | "-----------------------------------------------------", 209 | { 210 | "group": "Events", 211 | "number": 6000, 212 | "name": "onChange - Basic Usage" 213 | }, 214 | { 215 | "group": "Events", 216 | "number": 6001, 217 | "name": "onChange - Modify Value" 218 | }, 219 | "-----------------------------------------------------", 220 | { 221 | "group": "Methods", 222 | "number": 7000, 223 | "name": "addOption" 224 | }, 225 | { 226 | "group": "Methods", 227 | "number": 7001, 228 | "name": "blur" 229 | }, 230 | { 231 | "group": "Methods", 232 | "number": 7002, 233 | "name": "clear" 234 | }, 235 | { 236 | "group": "Methods", 237 | "number": 7003, 238 | "name": "destroy" 239 | }, 240 | { 241 | "group": "Methods", 242 | "number": 7004, 243 | "name": "focus" 244 | }, 245 | { 246 | "group": "Methods", 247 | "number": 7005, 248 | "name": "getList" 249 | }, 250 | { 251 | "group": "Methods", 252 | "number": 7006, 253 | "name": "getLists" 254 | }, 255 | { 256 | "group": "Methods", 257 | "number": 7007, 258 | "name": "getValue" 259 | }, 260 | { 261 | "group": "Methods", 262 | "number": 7008, 263 | "name": "removeList" 264 | }, 265 | { 266 | "group": "Methods", 267 | "number": 7009, 268 | "name": "removeTokenGroup" 269 | }, 270 | { 271 | "group": "Methods", 272 | "number": 7011, 273 | "name": "setValue" 274 | }, 275 | { 276 | "group": "Methods", 277 | "number": 7056, 278 | "name": "Simulate User Input" 279 | }, 280 | "-----------------------------------------------------" 281 | ] -------------------------------------------------------------------------------- /data/releases.json: -------------------------------------------------------------------------------- 1 | [ 2 | "-----------------------------------------------------------------", 3 | { 4 | "version":"0.4.0", 5 | "date":"XXX", 6 | "released":false, 7 | "changes":[ 8 | 9 | ], 10 | "files":[ 11 | { "name":"autocomplete-0.4.0.zip", "size":"68.3 KB" }, 12 | { "name":"autocomplete-0.4.0.js", "size":"65.0 KB" }, 13 | { "name":"autocomplete-0.4.0.min.js", "size":"20.9 KB" }, 14 | { "name":"autocomplete-0.4.0.css", "size":"2.89 KB" }, 15 | { "name":"autocomplete-0.4.0.min.css", "size":"2.32 KB" } 16 | ] 17 | }, 18 | "-----------------------------------------------------------------", 19 | { 20 | "version":"0.3.0", 21 | "date":"20 Oct 2013", 22 | "changes":[ 23 | "Allow DOM element to be passed to AutoComplete constructor (GitHub Issue #67)", 24 | "Fix bug with jQuery detection code (GitHub Issue #72)", 25 | "Give unique CSS class names to all elements (GitHub Issue #73)" 26 | ], 27 | "files":[ 28 | { "name":"autocomplete-0.3.0.zip", "size":"87.2 KB" }, 29 | { "name":"autocomplete-0.3.0.js", "size":"64.4 KB" }, 30 | { "name":"autocomplete-0.3.0.min.js", "size":"21.9 KB" }, 31 | { "name":"autocomplete-0.3.0.css", "size":"2.3 KB" }, 32 | { "name":"autocomplete-0.3.0.min.css", "size":"1.9 KB" } 33 | ] 34 | }, 35 | "-----------------------------------------------------------------", 36 | { 37 | "version":"0.2.1", 38 | "date":"09 Apr 2013", 39 | "changes":[ 40 | "Fix bug with escaping HTML when calculating the width of the input element" 41 | ], 42 | "files":[ 43 | { "name":"autocomplete-0.2.1.zip", "size":"68.3 KB" }, 44 | { "name":"autocomplete-0.2.1.js", "size":"65.0 KB" }, 45 | { "name":"autocomplete-0.2.1.min.js", "size":"20.9 KB" }, 46 | { "name":"autocomplete-0.2.1.css", "size":"2.89 KB" }, 47 | { "name":"autocomplete-0.2.1.min.css", "size":"2.32 KB" } 48 | ] 49 | }, 50 | "-----------------------------------------------------------------", 51 | { 52 | "version":"0.2.0", 53 | "date":"25 Mar 2013", 54 | "changes":[ 55 | "Remove \"groups\" option for Option Objects", 56 | "Improve tab behavior", 57 | "Bug fixes" 58 | ], 59 | "files":[ 60 | { "name":"autocomplete-0.2.0.zip", "size":"68.3 KB" }, 61 | { "name":"autocomplete-0.2.0.js", "size":"65.0 KB" }, 62 | { "name":"autocomplete-0.2.0.min.js", "size":"20.9 KB" }, 63 | { "name":"autocomplete-0.2.0.css", "size":"2.89 KB" }, 64 | { "name":"autocomplete-0.2.0.min.css", "size":"2.32 KB" } 65 | ] 66 | }, 67 | "-----------------------------------------------------------------", 68 | { 69 | "version":"0.1.0", 70 | "date":"14 Feb 2013", 71 | "changes":[ 72 | "Initial release" 73 | ], 74 | "files":[ 75 | { "name":"autocomplete-0.1.0.zip", "size":"24.1 KB" }, 76 | { "name":"autocomplete-0.1.0.js", "size":"60.4 KB" }, 77 | { "name":"autocomplete-0.1.0.min.js", "size":"20.0 KB" }, 78 | { "name":"autocomplete-0.1.0.css", "size":"2.92 KB" }, 79 | { "name":"autocomplete-0.1.0.min.css", "size":"2.44 KB" } 80 | ] 81 | }, 82 | "-----------------------------------------------------------------" 83 | ] -------------------------------------------------------------------------------- /examples/1000.html: -------------------------------------------------------------------------------- 1 |
At its most simple, AutoComplete works with an array of values.
2 | -------------------------------------------------------------------------------- /examples/1000.js: -------------------------------------------------------------------------------- 1 | var fruits = ['Apple', 'Banana', 'Orange']; 2 | var widget = new AutoComplete('search_bar', fruits); -------------------------------------------------------------------------------- /examples/1002.html: -------------------------------------------------------------------------------- 1 |You can have nested lists using the children
property.
This example works like selecting from a key / value list.
3 | -------------------------------------------------------------------------------- /examples/1002.js: -------------------------------------------------------------------------------- 1 | var config = { 2 | initialList: 'foods', 3 | lists: { 4 | foods: [ 5 | { value: 'Fruits', children: 'fruits' }, 6 | { value: 'Meats', children: 'meats' }, 7 | { value: 'Vegetables', children: 'vegetables' } 8 | ], 9 | fruits: ['Apple', 'Banana', 'Orange'], 10 | meats: ['Beef', 'Chicken', 'Pork'], 11 | vegetables: ['Carrot', 'Lettuce', 'Onion'] 12 | } 13 | }; 14 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/1003.html: -------------------------------------------------------------------------------- 1 |Your lists can be arbitrarily nested using the children
property.
In this example we have more specific choices for beef and steak than the other foods.
3 | -------------------------------------------------------------------------------- /examples/1003.js: -------------------------------------------------------------------------------- 1 | var foods = [ 2 | { value: 'Fruits', children: 'fruits' }, 3 | { value: 'Meats', children: 'meats' }, 4 | { value: 'Vegetables', children: 'vegetables' } 5 | ]; 6 | var fruits = ['Apple', 'Banana', 'Orange']; 7 | var meats = [ 8 | { value: 'Beef', children: 'beef' }, 9 | 'Chicken', 10 | 'Pork' 11 | ]; 12 | var vegetables = ['Carrot', 'Lettuce', 'Onion']; 13 | var beef = [ 14 | 'Hamburger', 15 | 'Pot Roast', 16 | { value: 'Steak', children: 'steak' } 17 | ]; 18 | var steak = ['NY Strip', 'Ribeye', 'T-Bone']; 19 | 20 | var config = { 21 | initialList: 'foods', 22 | lists: { 23 | foods: foods, 24 | fruits: fruits, 25 | meats: meats, 26 | vegetables: vegetables, 27 | beef: beef, 28 | steak: steak 29 | } 30 | }; 31 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/1007.html: -------------------------------------------------------------------------------- 1 |This example shows multiple lists connected using the children
property.
You can have multiple widgets on the same page.
2 | 3 | -------------------------------------------------------------------------------- /examples/1045.js: -------------------------------------------------------------------------------- 1 | var fruits = ['Apple', 'Banana', 'Orange']; 2 | var widget1 = new AutoComplete('search_bar1', fruits); 3 | var widget2 = new AutoComplete('search_bar2', fruits); -------------------------------------------------------------------------------- /examples/2000.html: -------------------------------------------------------------------------------- 1 |You can source a list from a URL via AJAX.
2 | -------------------------------------------------------------------------------- /examples/2000.js: -------------------------------------------------------------------------------- 1 | var url = 'api/states.php?q={input}'; 2 | var widget = new AutoComplete('search_bar', url); -------------------------------------------------------------------------------- /examples/2001.html: -------------------------------------------------------------------------------- 1 |You can combine options defined in the JavaScript with options that come from the server.
2 |In this example I've included some common Texas cities locally and am requesting the rest via AJAX.
3 | -------------------------------------------------------------------------------- /examples/2001.js: -------------------------------------------------------------------------------- 1 | var commonCities = ['Austin','Dallas','El Paso','Houston','San Antonio']; 2 | var config = { 3 | lists: { 4 | cities: { 5 | ajaxOpts: { 6 | url: 'api/cities.php?state=TX&q={input}&includeCommon=false' 7 | }, 8 | options: commonCities 9 | } 10 | } 11 | }; 12 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/2002.html: -------------------------------------------------------------------------------- 1 |Lists using AJAX work the same way as lists with local options.
2 |In this example, our initial list has local options and all of its children lists are powered by AJAX.
3 | -------------------------------------------------------------------------------- /examples/2002.js: -------------------------------------------------------------------------------- 1 | var config = { 2 | initialList: 'animals', 3 | lists: { 4 | animals: [ 5 | { value: 'Birds', children: 'birds' }, 6 | { value: 'Mammals', children: 'mammals' }, 7 | { value: 'Reptiles', children: 'reptiles' } 8 | ], 9 | birds: 'api/birds.php?q={input}', 10 | mammals: 'api/mammals.php?q={input}', 11 | reptiles: 'api/reptiles.php?q={input}' 12 | } 13 | }; 14 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/2003.html: -------------------------------------------------------------------------------- 1 |You can modify results that come back from the server with a preProcess
function on ajaxOpts
.
The function should return an array of Option Objects.
3 |In this example the server is returning a nested object of countries indexed by abbreviation. The createCountryOptions
function turns this into an array of Option Objects.
You can provide custom AJAX settings using the ajaxOpts
property.
In this example we are sourcing our list with an HTTP POST request.
3 | -------------------------------------------------------------------------------- /examples/2004.js: -------------------------------------------------------------------------------- 1 | var buildAjaxOpts = function(input) { 2 | return { 3 | data: { 4 | username: 'admin', 5 | password: 'secret1', 6 | q: input 7 | }, 8 | type: 'POST', 9 | url: 'api/secret_users.php' 10 | }; 11 | }; 12 | 13 | var config = { 14 | lists: { 15 | users: { 16 | ajaxOpts: buildAjaxOpts, 17 | optionHTML: '{username}' 18 | } 19 | } 20 | }; 21 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/2020.html: -------------------------------------------------------------------------------- 1 |You can cache the results of AJAX requests with the cacheAjax
property.
Results will be cached in localStorage or just for the current browser session if localStorage is not available.
3 |If you are using this feature I recommend including a localStorage polyfill.
4 | -------------------------------------------------------------------------------- /examples/2020.js: -------------------------------------------------------------------------------- 1 | var config = { 2 | lists: { 3 | states: { 4 | ajaxOpts: { 5 | url: 'api/states.php?q={input}' 6 | }, 7 | cacheAjax: true 8 | } 9 | } 10 | }; 11 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/2021.html: -------------------------------------------------------------------------------- 1 |Use the cacheAjaxSeconds
property to control the length the results are cached for.
The default is to cache results for 2 weeks.
3 |In this silly example, we're only caching the results for 15 seconds.
4 | -------------------------------------------------------------------------------- /examples/2021.js: -------------------------------------------------------------------------------- 1 | var config = { 2 | lists: { 3 | states: { 4 | ajaxOpts: { 5 | url: 'api/states.php?slow=true&q={input}' 6 | }, 7 | cacheAjax: true, 8 | cacheAjaxSeconds: 15 9 | } 10 | } 11 | }; 12 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/3000.html: -------------------------------------------------------------------------------- 1 |You can set the initial value of the widget with the initialValue
property.
The value of the widget must be an array of Token Groups.
3 | 4 | -------------------------------------------------------------------------------- /examples/3000.js: -------------------------------------------------------------------------------- 1 | var config = { 2 | initialValue: [['Kiwi'], ['Apple']], 3 | lists: { 4 | fruits: ['Apple', 'Banana', 'Orange'] 5 | } 6 | }; 7 | var widget = new AutoComplete('search_bar', config); 8 | 9 | $('#show_value_btn').on('click', function() { 10 | console.log("Current value of the widget:"); 11 | console.log(widget.getValue()); 12 | }); -------------------------------------------------------------------------------- /examples/3001.html: -------------------------------------------------------------------------------- 1 |You can use the maxTokenGroups
property to control how many token groups get displayed in the search bar.
In this example we are limiting the user to 3 fruits.
3 | -------------------------------------------------------------------------------- /examples/3001.js: -------------------------------------------------------------------------------- 1 | var config = { 2 | maxTokenGroups: 3, 3 | lists: { 4 | fruits: ['Apple', 'Banana', 'Orange'] 5 | } 6 | }; 7 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/3005.html: -------------------------------------------------------------------------------- 1 |You can set a placeholder for the search bar with the placeholderHTML
property.
You can log AutoComplete errors to console.log()
by setting the showErrors
property to 'console'
.
In this example we see an error when we call the setValue
method with an invalid data structure.
Use the tokenSeparatorHTML
property to control the space between tokens in the search bar.
tokenSeparatorHTML
can be a function.
You can log AutoComplete errors to window.alert()
by setting the showErrors
property to 'alert'
.
In this example we see an error when our custom ajaxOpts.url
function did not return a string.
You can force the user to pick from a list, allow free-form input, or do a hybrid with allowFreeform
.
In this example we have mandatory choices for breakfast, suggestions for lunch (but you can type in anything you want), and anything goes for dinner.
3 |Allowing the user to enter free-form text is disabled by default.
4 | -------------------------------------------------------------------------------- /examples/4001.js: -------------------------------------------------------------------------------- 1 | var config = { 2 | initialList: 'meals', 3 | lists: { 4 | meals: [ 5 | { value: 'Breakfast', children: 'breakfast' }, 6 | { value: 'Lunch', children: 'lunch' }, 7 | { value: 'Dinner', children: 'dinner' } 8 | ], 9 | 10 | breakfast: { 11 | allowFreeform: false, // NOTE: this is the default 12 | options: ['Bacon', 'Eggs', 'Pancake', 'Waffle'] 13 | }, 14 | 15 | lunch: { 16 | allowFreeform: true, 17 | options: ['Calzone', 'Hot dog', 'Greek Salad', 'Panini', 'Turkey Sandwich'] 18 | }, 19 | 20 | dinner: { 21 | allowFreeform: true 22 | } 23 | } 24 | }; 25 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/4003.html: -------------------------------------------------------------------------------- 1 |You can control the list workflow by using the children
property on the list object.
Use the ajaxLoadingHTML
property to create a custom loading message.
Use the allowFreeform
property to let the user enter free-form text.
You can have options mixed in with freeform.
3 | -------------------------------------------------------------------------------- /examples/4014.js: -------------------------------------------------------------------------------- 1 | var config = { 2 | lists: { 3 | fruits: { 4 | allowFreeform: true, 5 | options: ['Apple','Banana','Orange'] 6 | } 7 | } 8 | }; 9 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/4033.html: -------------------------------------------------------------------------------- 1 |You can use optionHTML
on the List Object to control how options get rendered in the dropdown.
optionHTML
and tokenHTML
can be functions.
ajaxLoadingHTML
can be a function.
Use the matchOptions
property to define a custom matching function.
The function should return an array of Option Objects
.
In this example, we're allowing the user to match on exact PLU code in addition to the regular text search.
4 |Note that this example is kind of silly, it would be a much better user experience to include the PLU code on the optionHTML
if we wanted to allow the user to match against it.
Use the ajaxErrorHTML
property to set a custom message when there is an AJAX failure.
ajaxErrorHTML
can also be a function that returns an HTML string.
In this example, our buggy.php script is acting strange and returning invalid JSON and long response times.
3 | -------------------------------------------------------------------------------- /examples/4072.js: -------------------------------------------------------------------------------- 1 | var buildAjaxError = function(errType) { 2 | if (errType === 'parsererror') { 3 | return 'Error parsing the JSON.A children
property on an Option Object will override a children
property on the parent List Object.
In this example, if the user does not want toppings on their sundae it ends the list workflow.
3 | -------------------------------------------------------------------------------- /examples/5022.js: -------------------------------------------------------------------------------- 1 | var containerList = { 2 | children: 'iceCream', 3 | options: ['Bowl', 'Regular Cone', 'Waffle Cone'] 4 | }; 5 | 6 | var iceCreamList = { 7 | children: 'toppings1', 8 | options: ['Chocolate', 'Strawberry', 'Vanilla'] 9 | }; 10 | 11 | var toppings1List = { 12 | children: 'toppings2', 13 | options: [ 14 | 'Caramel', 'Hot Fudge', 'Whip Cream', 15 | {children: false, value: 'No Toppings'} 16 | ] 17 | }; 18 | 19 | var toppings2List = { 20 | children: 'cherry', 21 | options: ['Chocolate Chips', "M&M's", 'Nuts', 'Sprinkles'] 22 | }; 23 | 24 | var cherryList = ['Cherry', 'No Cherry']; 25 | 26 | var config = { 27 | initialList: 'container', 28 | lists: { 29 | container: containerList, 30 | iceCream: iceCreamList, 31 | toppings1: toppings1List, 32 | toppings2: toppings2List, 33 | cherry: cherryList 34 | } 35 | }; 36 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/6000.html: -------------------------------------------------------------------------------- 1 |You can use the onChange
property to execute a function when the value of the search bar changes.
You can change the value of the widget with the onChange
function by returning a valid token group array.
In this silly example, we're always confirming that the user wants to remove a fruit.
3 | -------------------------------------------------------------------------------- /examples/6001.js: -------------------------------------------------------------------------------- 1 | var onChange = function(newValue, oldValue) { 2 | if (newValue.length < oldValue.length) { 3 | var msg = 'Are you sure you want to remove this fruit?'; 4 | var sure = confirm(msg); 5 | if (sure !== true) { 6 | return oldValue; 7 | } 8 | } 9 | return newValue; 10 | }; 11 | 12 | var config = { 13 | onChange: onChange, 14 | lists: { 15 | fruits: ['Apple', 'Banana', 'Orange'] 16 | } 17 | }; 18 | var widget = new AutoComplete('search_bar', config); -------------------------------------------------------------------------------- /examples/7000.html: -------------------------------------------------------------------------------- 1 |You can add an option to a list using the addOption
method.
You can remove the focus from the search bar with the blur
method.
In this silly example, we're removing the focus every 5 seconds.
3 | -------------------------------------------------------------------------------- /examples/7001.js: -------------------------------------------------------------------------------- 1 | var fruits = ['Apple', 'Banana', 'Orange']; 2 | var widget = new AutoComplete('search_bar', fruits); 3 | 4 | setInterval(widget.blur, 5000); -------------------------------------------------------------------------------- /examples/7002.html: -------------------------------------------------------------------------------- 1 |You can empty the contents of the search bar with the clear
method.
Calling clear()
has the same effect as calling setValue([])
.
You can completely remove the widget from the DOM with the destroy
method.
Calling destroy is not reversible. You will have to re-initialize the widget if you want to see it again.
3 | 4 | -------------------------------------------------------------------------------- /examples/7003.js: -------------------------------------------------------------------------------- 1 | var fruits = ['Apple', 'Banana', 'Orange']; 2 | var widget = new AutoComplete('search_bar', fruits); 3 | 4 | $('#destroyBtn').on('click', function() { 5 | widget.destroy(); 6 | $('#destroyBtn').hide(); 7 | }); -------------------------------------------------------------------------------- /examples/7004.html: -------------------------------------------------------------------------------- 1 |You can put the focus on the search bar with the focus
method.
Use the getList
method to retrieve the List Object for a list.
getList
returns the List Object if the list exists; false
otherwise.
getList
returns the full List Object used internally by AutoComplete, even if you initialized the list using shorthand.
The getLists
method returns an object of List Objects.
It is essentially a way to see the value of config.lists
.
You can retrieve the current value of the search bar using the getValue
method.
The value of the search bar is an array of Token Groups.
3 | 4 | -------------------------------------------------------------------------------- /examples/7007.js: -------------------------------------------------------------------------------- 1 | var fruits = [ 2 | { value: { name: 'Apple', plu: 4015, inSeason: false } }, 3 | { value: { name: 'Banana', plu: 4011, inSeason: true } }, 4 | { value: { name: 'Orange', plu: 3037, inSeason: false } } 5 | ]; 6 | 7 | var widget = new AutoComplete('search_bar', { 8 | lists: { 9 | fruits: { 10 | optionHTML: '{name}', 11 | options: fruits 12 | } 13 | } 14 | }); 15 | 16 | $('#showValueBtn').on('click', function() { 17 | console.log("Current value of the search bar:"); 18 | console.log(widget.getValue()); 19 | }); -------------------------------------------------------------------------------- /examples/7008.html: -------------------------------------------------------------------------------- 1 |You can remove a list with the removeList
method.
removeList
returns true
if the list was removed; false
otherwise.
You cannot remove the initialList
.
You can remove a Token Group with the removeTokenGroup
method.
You can add and update lists with the setList
method.
In this example, I'm updating the initialList
with the onChange
function every time the value changes.
You can set the value of the widget with the setValue
method.
The value of the widget is an array of Token Groups.
3 |You can use a String as shorthand for a Token Object when using setValue
.
Use the pressDown
, pressEnter
, pressUp
, and setInput
methods to simulate user input.
'.$method['name'].'
'.$arg[0].'
- '.$arg[1].'
'.buildType($type).'
'."\n"; 331 | return $html; 332 | } 333 | 334 | function buildType($type) { 335 | if (is_array($type) !== true) { 336 | $type = array($type); 337 | } 338 | 339 | $html = ''; 340 | for ($i = 0; $i < count($type); $i++) { 341 | if ($i !== 0) { 342 | $html .= ' or'.$d.'
'."\n"; 367 | } 368 | return $html; 369 | } 370 | 371 | function buildDefault($default) { 372 | if ($default === false) { 373 | return 'n/a'; 374 | } 375 | return $default; 376 | } 377 | 378 | function buildExample($ex, $allExamples) { 379 | if (is_array($ex) !== true) { 380 | $ex = array($ex); 381 | } 382 | 383 | $html = ''; 384 | foreach ($ex as $exNum) { 385 | $example = getExampleByNumber($exNum, $allExamples); 386 | if ($example === false) continue; 387 | 388 | $html .= ' '."\n"; 389 | } 390 | return $html; 391 | } 392 | 393 | function buildErrorRow($error) { 394 | $html = ''; 395 | 396 | // table row 397 | $html .= ''.$p.'
'."\n"; 414 | } 415 | $html .= '