| r560 | r568 | |
|---|
| 9 | 9 | UI.AutoComplete = Class.create(UI.Options, { |
| 10 | 10 | // Group: Options |
| 11 | 11 | options: { |
| 12 | | className: "pui-autocomplete", // CSS class name prefix |
| 13 | | maxItem: 10, // Max items in autocomplete |
| 14 | | url: false, // Url for ajax completion |
| 15 | | delay: 0.2, // Delay before running ajax request |
| 16 | | infoMessage: false, // Message to display when input field is empty |
| 17 | | progressMessage: false, // Message to display when ajax request is running |
| 18 | | noMatchMessage: false, // Message to display when nothing match entry |
| 19 | | shadow: false, // Shadow theme name (false = no shadow) |
| 20 | | highlight: true, // Highlight search string in list |
| 21 | | hiddenField: false // Add an hidden field for each entries values are: false, true (==element name) or a string |
| 22 | | }, |
| 12 | className: "pui-autocomplete", // CSS class name prefix |
| 13 | max: {selection: 10, selected:false}, // Max values fort autocomplete, |
| 14 | // selection : max item in pulldown menu |
| 15 | // selected : max selected items (false = no limit) |
| 16 | url: false, // Url for ajax completion |
| 17 | delay: 0.2, // Delay before running ajax request |
| 18 | shadow: false, // Shadow theme name (false = no shadow) |
| 19 | highlight: false, // Highlight search string in list |
| 20 | tokens: false // Tokens used to automatically adds a new entry (ex tokens:[',', ' '] for coma and spaces) |
| 21 | }, |
| 23 | 22 | |
| 24 | 23 | initialize: function(element, options) { |
| 25 | 24 | this.setOptions(options); |
| 26 | | this.element = $(element).hide(); |
| 27 | | if (this.options.hiddenField == true) |
| 28 | | this.options.hiddenField = this.element.getAttribute("name"); |
| 29 | | |
| 30 | | this.render(); |
| 31 | | |
| 32 | | this.updateInputSize(); |
| 25 | if(typeof(this.options.tokens) == 'string') |
| 26 | this.options.tokens = new Array(this.options.tokens); |
| 27 | |
| 28 | this.element = $(element); |
| 29 | |
| 30 | this.render(); |
| 31 | this.updateInputSize(); |
| 32 | this.nbSelected = 0; |
| 33 | 33 | this.list = []; |
| 34 | |
| 34 | 35 | this.keydownHandler = this.keydown.bindAsEventListener(this); |
| 35 | 36 | document.observe('keypress', this.keydownHandler); |
| 36 | 37 | }, |
| --- | --- | |
| 43 | 44 | this.element.show(); |
| 44 | 45 | }, |
| 45 | 46 | |
| 47 | init: function(tokens) { |
| 48 | tokens = tokens || this.options.tokens; |
| 49 | var values = this.input.value.split(tokens.first()); |
| 50 | values.each(function(text) {if (!text.empty()) this.add(text)}.bind(this)); |
| 51 | this.input.clear(); |
| 52 | |
| 53 | return this; |
| 54 | }, |
| 55 | |
| 46 | 56 | add: function(text, value, options) { |
| 57 | // No more than max |
| 58 | if (!this.canAddMoreItems()) |
| 59 | return; |
| 60 | |
| 47 | 61 | // Create a new li |
| 48 | 62 | var li = new Element("li", Object.extend({className: this.getClassName("box")}, options || {})); |
| 49 | 63 | li.observe("click", this.focus.bindAsEventListener(this, li)) |
| --- | --- | |
| 55 | 69 | li.insert(new Element("span").update(text).insert(close)); |
| 56 | 70 | close.observe("click", this.remove.bind(this, li)); |
| 57 | 71 | |
| 58 | | // Add na hidden field if need be |
| 59 | | if (this.options.hiddenField != false) |
| 60 | | li.insert(new Element('input', {type: 'hidden', name: this.options.hiddenField, value: value})); |
| 72 | this.input.parentNode.insert({before: li}); |
| 73 | this.nbSelected++; |
| 74 | this.updateSelectedText().updateHiddenField(); |
| 61 | 75 | |
| 62 | | this.input.parentNode.insert({before: li}); |
| 63 | 76 | this.updateInputSize(); |
| 77 | if (!this.canAddMoreItems()) |
| 78 | this.hideAutocomplete().fire("selection:max_reached"); |
| 79 | else |
| 80 | this.hideAutocomplete().fire("input:empty"); |
| 81 | |
| 64 | 82 | return this.fire("element:added", {element: li}); |
| 65 | 83 | }, |
| 66 | 84 | |
| --- | --- | |
| 68 | 86 | element.stopObserving(); |
| 69 | 87 | |
| 70 | 88 | element.remove(); |
| 89 | this.nbSelected--; |
| 90 | this.updateSelectedText().updateHiddenField(); |
| 91 | |
| 71 | 92 | this.updateInputSize(); |
| 93 | this.input.focus(); |
| 72 | 94 | return this.fire("element:removed", {element: element}); |
| 73 | 95 | }, |
| 74 | 96 | |
| 97 | removeLast: function() { |
| 98 | var element = this.container.select("li." + this.getClassName("box")).last(); |
| 99 | if (element) |
| 100 | this.remove(element); |
| 101 | }, |
| 102 | |
| 75 | 103 | removeSelected: function(event) { |
| 76 | 104 | if (event.element().readAttribute("type") != "text" && event.keyCode == Event.KEY_BACKSPACE) { |
| 77 | 105 | this.container.select("li." + this.getClassName("box")).each(function(element) { |
| --- | --- | |
| 93 | 121 | this.deselectAll(); |
| 94 | 122 | |
| 95 | 123 | element = element || this.input; |
| 96 | | if (element == this.input) { |
| 124 | if (element == this.input && !this.input.readAttribute("focused")) { |
| 125 | this.input.writeAttribute("focused", true); |
| 97 | 126 | this.input.focus(); |
| 98 | 127 | this.displayCompletion(); |
| 99 | 128 | } |
| --- | --- | |
| 115 | 144 | if (!element) |
| 116 | 145 | this.input.blur(); |
| 117 | 146 | |
| 118 | | this.hideAutocomplete(); |
| 147 | // this.hideAutocomplete(); |
| 119 | 148 | return this.fire("element:blur", {element: element}); |
| 120 | 149 | }, |
| 121 | 150 | |
| --- | --- | |
| 165 | 194 | fire: function(eventName, memo) { |
| 166 | 195 | memo = memo || { }; |
| 167 | 196 | memo.autocomplete = this; |
| 168 | | return this.element.fire('autocomplete:' + eventName, memo); |
| 197 | return this.input.fire('autocomplete:' + eventName, memo); |
| 169 | 198 | }, |
| 170 | 199 | |
| 171 | 200 | /* |
| --- | --- | |
| 180 | 209 | this |
| 181 | 210 | */ |
| 182 | 211 | observe: function(eventName, handler) { |
| 183 | | this.element.observe('autocomplete:' + eventName, handler.bind(this)); |
| 212 | this.input.observe('autocomplete:' + eventName, handler.bind(this)); |
| 184 | 213 | return this; |
| 185 | 214 | }, |
| 186 | 215 | |
| --- | --- | |
| 196 | 225 | this |
| 197 | 226 | */ |
| 198 | 227 | stopObserving: function(eventName, handler) { |
| 199 | | this.element.stopObserving('autocomplete:' + eventName, handler); |
| 228 | this.input.stopObserving('autocomplete:' + eventName, handler); |
| 200 | 229 | return this; |
| 201 | 230 | }, |
| 202 | 231 | |
| --- | --- | |
| 226 | 255 | }, |
| 227 | 256 | |
| 228 | 257 | // Add current selected element from completion to input |
| 229 | | addCurrent: function() { |
| 258 | addCurrentSelected: function() { |
| 230 | 259 | if (this.current) { |
| 231 | 260 | // Get selected text |
| 232 | 261 | var index = this.autocompletionContainer.childElements().indexOf(this.current); |
| 233 | | this.add(this.selectedList[index].text); |
| 234 | 262 | // Clear input |
| 235 | 263 | this.current = null; |
| 236 | | this.input.clear(); |
| 264 | this.input.value = ""; |
| 265 | |
| 266 | this.add(this.selectedList[index].text, this.selectedList[index].value); |
| 267 | |
| 237 | 268 | // Refocus input |
| 238 | | |
| 239 | 269 | (function() {this.input.focus()}.bind(this)).defer(); |
| 240 | 270 | // Clear completion (force render) |
| 241 | 271 | this.displayCompletion(); |
| --- | --- | |
| 245 | 275 | // Display message (info or progress) |
| 246 | 276 | showMessage: function(text) { |
| 247 | 277 | if (text) { |
| 278 | if (this.hideTimer) { |
| 279 | clearTimeout(this.hideTimer); |
| 280 | this.hideTimer = false; |
| 281 | } |
| 282 | // udate text |
| 248 | 283 | this.message.update(text); |
| 249 | 284 | this.message.show(); |
| 285 | // Hidden auto complete suggestion |
| 286 | this.autocompletionContainer.hide(); |
| 250 | 287 | this.showAutocomplete(); |
| 251 | 288 | } |
| 252 | 289 | else |
| --- | --- | |
| 256 | 293 | // Run ajax request to get completion values |
| 257 | 294 | runRequest: function(search) { |
| 258 | 295 | this.autocompletionContainer.hide(); |
| 259 | | this.showMessage(this.options.progressMessage); |
| 260 | | new Ajax.Request(this.options.url, {parameters: {search: search, max: this.options.maxItem}, onComplete: function(transport) { |
| 296 | this.fire("request:started"); |
| 297 | new Ajax.Request(this.options.url, {parameters: {search: search, max: this.options.max.selection}, onComplete: function(transport) { |
| 261 | 298 | this.setAutocompleteList(transport.responseText.evalJSON()); |
| 262 | 299 | this.timer = null; |
| 300 | this.fire("request:completed"); |
| 263 | 301 | this.displayCompletion(); |
| 264 | 302 | }.bind(this)}); |
| 265 | 303 | }, |
| --- | --- | |
| 270 | 308 | }, |
| 271 | 309 | |
| 272 | 310 | // Key down (for up/down and return key) |
| 273 | | keydown: function(event) { |
| 274 | | switch(event.keyCode) { |
| 311 | keydown: function(event) { |
| 312 | if (event.element() != this.input) |
| 313 | return; |
| 314 | |
| 315 | this.ignoreKeyup = false; |
| 316 | // Check max |
| 317 | if (this.options.max.selected && this.nbSelected == this.options.max.selected) |
| 318 | this.ignoreKeyup = true; |
| 319 | |
| 320 | // Check tokens |
| 321 | if (this.options.tokens){ |
| 322 | var tokenFound = this.options.tokens.find(function(token){ |
| 323 | return String.fromCharCode(event.charCode ? event.charCode : event.keyCode) == token ; |
| 324 | }); |
| 325 | if (tokenFound) { |
| 326 | var value = this.input.value.strip(); |
| 327 | this.ignoreKeyup = true; |
| 328 | var value = this.input.value; |
| 329 | this.input.clear(); |
| 330 | if (!value.empty()) |
| 331 | this.add(value); |
| 332 | } |
| 333 | } |
| 334 | switch(event.keyCode) { |
| 275 | 335 | case Event.KEY_UP: |
| 276 | 336 | this.moveSelection(event, 'previous'); |
| 277 | | event.stop(); |
| 278 | | return false; |
| 337 | this.ignoreKeyup = true; |
| 338 | break; |
| 279 | 339 | case Event.KEY_DOWN: |
| 280 | 340 | this.moveSelection(event, 'next'); |
| 281 | | event.stop(); |
| 282 | | return false; |
| 341 | this.ignoreKeyup = true; |
| 342 | break; |
| 283 | 343 | case Event.KEY_RETURN: |
| 284 | | this.addCurrent(); |
| 285 | | event.stop(); |
| 286 | | return false; |
| 344 | this.addCurrentSelected(); |
| 345 | this.ignoreKeyup = true; |
| 346 | break; |
| 347 | case Event.KEY_BACKSPACE: |
| 348 | if (this.input.getCaretPosition() == 0) |
| 349 | this.removeLast(); |
| 350 | break; |
| 287 | 351 | } |
| 352 | if (this.ignoreKeyup) { |
| 353 | event.stop(); |
| 354 | return false; |
| 355 | } |
| 356 | else |
| 357 | return true; |
| 288 | 358 | }, |
| 289 | 359 | |
| 290 | 360 | // Key to handle completion |
| 291 | | keyup: function(event) { |
| 292 | | switch(event.keyCode) { |
| 293 | | case Event.KEY_UP: |
| 294 | | case Event.KEY_DOWN: |
| 295 | | case Event.KEY_RETURN: |
| 296 | | break; |
| 297 | | default: |
| 361 | keyup: function(event) { |
| 362 | if (this.ignoreKeyup) { |
| 363 | this.ignoreKeyup = false; |
| 364 | return true; |
| 365 | } |
| 366 | else { |
| 367 | this.updateHiddenField(); |
| 298 | 368 | this.displayCompletion(event); |
| 369 | return true; |
| 299 | 370 | } |
| 300 | 371 | }, |
| 301 | 372 | |
| --- | --- | |
| 329 | 400 | displayCompletion: function(event) { |
| 330 | 401 | var value = this.input.value.strip(); |
| 331 | 402 | this.current = null; |
| 403 | if (!this.canAddMoreItems()) |
| 404 | return; |
| 405 | |
| 332 | 406 | if (!value.empty()) { |
| 333 | 407 | // Run ajax reqest if need be |
| 334 | 408 | if (event && this.options.url) { |
| --- | --- | |
| 338 | 412 | } |
| 339 | 413 | else { |
| 340 | 414 | this.message.hide(); |
| 341 | | this.selectedList = this.list.findAll(function(entry) {return entry.text.match(value)}).slice(0, this.options.maxItem); |
| 415 | if (this.options.url) |
| 416 | this.selectedList = this.list; |
| 417 | else |
| 418 | this.selectedList = this.list.findAll(function(entry) {return entry.text.match(value)}).slice(0, this.options.max.selection); |
| 342 | 419 | this.autocompletionContainer.update(""); |
| 343 | | if (this.selectedList.empty()) |
| 344 | | this.showMessage(this.options.noMatchMessage); |
| 420 | if (this.selectedList.empty()) { |
| 421 | this.hideAutocomplete().fire('selection:empty'); |
| 422 | } |
| 345 | 423 | else { |
| 346 | 424 | this.selectedList.each(function(entry) { |
| 347 | 425 | var li = new Element("li").update(this.options.highlight ? entry.text.gsub(value, "<em>" + value +
"</em>") : entry.text);
|
| 348 | 426 | li.observe("mouseover", this.moveSelection.bindAsEventListener(this, li)) |
| 349 | | .observe("mousedown", this.addCurrent.bindAsEventListener(this)); |
| 427 | .observe("mousedown", this.addCurrentSelected.bindAsEventListener(this)); |
| 350 | 428 | this.autocompletionContainer.insert(li); |
| 351 | 429 | }.bind(this)); |
| 352 | 430 | this.autocompletionContainer.show(); |
| --- | --- | |
| 356 | 434 | } |
| 357 | 435 | } |
| 358 | 436 | else { |
| 359 | | this.showMessage(this.options.infoMessage); |
| 360 | | this.autocompletionContainer.hide(); |
| 361 | | this.showAutocomplete(); |
| 437 | this.hideAutocomplete().fire("input:empty"); |
| 362 | 438 | } |
| 363 | 439 | }, |
| 364 | 440 | |
| 365 | 441 | showAutocomplete: function(event){ |
| 366 | | this.autocompletion.place().show(event); |
| 442 | this.autocompletion.place(this.container).show(event); |
| 443 | return this; |
| 367 | 444 | }, |
| 368 | 445 | |
| 369 | 446 | hideAutocomplete: function(){ |
| 370 | | this.autocompletion.hide(); |
| 447 | if (!this.hideTimer) |
| 448 | this.hideTimer = (function() { |
| 449 | this.autocompletionContainer.hide(); |
| 450 | this.autocompletion.hide(); |
| 451 | this.hideTimer = false; |
| 452 | }).bind(this).defer(); |
| 453 | return this; |
| 371 | 454 | }, |
| 372 | 455 | |
| 373 | 456 | // Create HTML code |
| --- | --- | |
| 384 | 467 | // </ul> |
| 385 | 468 | // </div> |
| 386 | 469 | // |
| 387 | | |
| 388 | | this.input = new Element("input", {type: "text"}); |
| 389 | | |
| 470 | this.input = this.element.cloneNode(true); |
| 471 | this.input.writeAttribute("autocomplete", "off"); |
| 472 | this.input.name = ""; |
| 473 | |
| 390 | 474 | this.input.observe("focus", this.focus.bindAsEventListener(this, this.input)) |
| 391 | 475 | .observe("blur", this.blur.bindAsEventListener(this, this.input)) |
| 392 | | .observe("keyup", this.keyup.bindAsEventListener(this)) |
| 393 | | .observe("keypress", this.keydown.bindAsEventListener(this)); |
| 476 | .observe("keyup", this.keyup.bindAsEventListener(this)); |
| 394 | 477 | this.container = new Element('ul', {className: this.getClassName("holder")}) |
| 395 | 478 | .insert(new Element("li", {className: this.getClassName("input")}).insert(this.input)); |
| 396 | 479 | |
| 480 | this.autocompletionContainer = new Element("ul",{className: this.getClassName("results")}).hide(); |
| 481 | |
| 482 | this.message = new Element("div", {className: this.getClassName("message")}).hide(); |
| 483 | this.hidden = new Element("input",{type: 'hidden', name: this.element.name}); |
| 484 | this.element.insert({before: this.container}).insert({before: this.hidden}); |
| 485 | this.element.remove(); |
| 486 | |
| 397 | 487 | this.autocompletion = new UI.PullDown(this.container, { |
| 398 | 488 | className: this.getClassName("result"), |
| 399 | 489 | shadow: this.options.shadow, |
| --- | --- | |
| 401 | 491 | cloneWidth: true |
| 402 | 492 | }); |
| 403 | 493 | |
| 404 | | this.autocompletionContainer = new Element("ul",{className: this.getClassName("results")}).hide(); |
| 405 | | |
| 406 | | this.message = new Element("div", {className: this.getClassName("message")}).hide(); |
| 407 | | this.element.insert({before: this.container}); |
| 408 | | |
| 409 | 494 | this.autocompletion.insert(this.message).insert(this.autocompletionContainer); |
| 495 | }, |
| 496 | |
| 497 | canAddMoreItems: function() { |
| 498 | return !(this.options.max.selected && this.nbSelected == this.options.max.selected); |
| 499 | }, |
| 500 | |
| 501 | updateSelectedText: function() { |
| 502 | var selected = this.container.select("li." + this.getClassName("box")); |
| 503 | var content = selected.collect(function(element) {return element.down("span").firstChild.textContent}); |
| 504 | var separator = this.options.tokens ? this.options.tokens.first() : " "; |
| 505 | this.selectedText = content.empty() ? false : content.join(separator); |
| 506 | |
| 507 | return this; |
| 508 | }, |
| 509 | |
| 510 | updateHiddenField: function() { |
| 511 | var separator = this.options.tokens ? this.options.tokens.first() : " "; |
| 512 | this.hidden.value = this.selectedText ? $A([this.selectedText, this.input.value]).join(separator) : this.input.value; |
| 410 | 513 | } |
| 411 | 514 | }); |
| 412 | 515 | |
| 413 | 516 | Element.addMethods({ |
| 517 | getCaretPosition: function(element) { |
| 518 | if (element.createTextRange) { |
| 519 | var r = document.selection.createRange().duplicate(); |
| 520 | r.moveEnd('character', element.value.length); |
| 521 | if (r.text === '') return element.value.length; |
| 522 | return element.value.lastIndexOf(r.text); |
| 523 | } else return element.selectionStart; |
| 524 | }, |
| 525 | |
| 414 | 526 | getAttributeDimensions: function(element, attribut ) { |
| 415 | 527 | var dim = $w('top bottom left right').inject({}, function(dims, key) { |
| 416 | 528 | dims[key] = element.getNumStyle(attribut + "-" + key + (attribut == "border" ? "-width" : "")); |
| r560 | r568 | |
|---|
| 43 | 43 | </div> |
| 44 | 44 | |
| 45 | 45 | <script type="text/javascript"> |
| 46 | Event.simulateKeyboard = function(element, options) { |
| 47 | if (options.text) { |
| 48 | for(var i=0; i<options.text.length; i++) { |
| 49 | ["keydown", "keypress", "keyup"].each(function(eventName){ |
| 50 | Event.simulateKey(element, eventName, {charCode:options.text.charCodeAt(i)}); |
| 51 | }) |
| 52 | } |
| 53 | } |
| 54 | if (options.keyCode) { |
| 55 | ["keydown", "keypress", "keyup"].each(function(eventName){ |
| 56 | Event.simulateKey(element, eventName, {keyCode:options.keyCode}); |
| 57 | }) |
| 58 | } |
| 59 | } |
| 60 | |
| 46 | 61 | function runTest(){ |
| 47 | 62 | var autoComplete; |
| 48 | 63 | |
| --- | --- | |
| 66 | 81 | |
| 67 | 82 | new Test.Unit.Runner({ |
| 68 | 83 | teardown: function() { |
| 69 | | if (autoComplete) |
| 70 | | autoComplete.destroy(); |
| 84 | // if (autoComplete) |
| 85 | // autoComplete.destroy(); |
| 71 | 86 | }, |
| 72 | 87 | |
| 73 | | testShouldCreateAutocomplete: function() { with(this) { |
| 74 | | createAutocomplete(); |
| 75 | | |
| 76 | | assert(! $('auto_complete').visible()); |
| 77 | | assert($$('#input-text ul')); |
| 78 | | }}, |
| 88 | // testShouldCreateAutocomplete: function() { with(this) { |
| 89 | // createAutocomplete(); |
| 90 | // |
| 91 | // assert(! $('auto_complete').visible()); |
| 92 | // assert($$('#input-text ul')); |
| 93 | // }}, |
| 94 | // |
| 95 | // testShouldShowHideInfoMessage: function() { with(this) { |
| 96 | // createAutocomplete({infoMessage: "info message"}); |
| 97 | // |
| 98 | // // Show info message |
| 99 | // autoComplete.focus(); |
| 100 | // |
| 101 | // assert($$('.UI-widget-dropdown').first().visible()); |
| 102 | // assertEqual("info message", $$('.pui-autocomplete-message').first().innerHTML); |
| 103 | // |
| 104 | // // Hide info message |
| 105 | // autoComplete.blur(); |
| 106 | // assert(!$$('.UI-widget-dropdown').first()); |
| 107 | // }}, |
| 108 | // |
| 109 | // testShouldSetAutocompleteList: function() { with(this) { |
| 110 | // createAutocomplete({}, true); |
| 111 | // assertEqual(8, autoComplete.list.length); |
| 112 | // assertEqual("Sébastien", autoComplete.list.first().text) |
| 113 | // }}, |
| 114 | // |
| 115 | // testShouldAddRemoveSelectedElement: function() { with(this) { |
| 116 | // createAutocomplete({}, true); |
| 117 | // |
| 118 | // // Add an element |
| 119 | // autoComplete.add("Sébastien", "foo"); |
| 120 | // assert("Sébastien", $$("#input-text ul li span").first().innerHTML); |
| 121 | // |
| 122 | // // Add another element |
| 123 | // autoComplete.add("Tobie"); |
| 124 | // assertEqual(2, $$("#input-text ul li.pui-autocomplete-box").length); |
| 125 | // |
| 126 | // // Remove first element added |
| 127 | // autoComplete.remove($$("#input-text ul li.pui-autocomplete-box").first()) |
| 128 | // assert("Tobie", $$("#input-text ul li span").first().innerHTML); |
| 129 | // }}, |
| 130 | // |
| 131 | // testShouldDisplayCompletion: function() { with(this) { |
| 132 | // createAutocomplete({}, true); |
| 133 | // autoComplete.focus(); |
| 134 | // Event.simulateKeys(autoComplete.input, "en"); |
| 135 | // Event.simulateKey(autoComplete.input, "keyup", 101); |
| 136 | // |
| 137 | // assertEqual(2, $$("ul.pui-autocomplete-results li").length); |
| 138 | // assertEqual("Sébasti<em>en</em>", $$("ul.pui-autocomplete-results li")[0].innerHTML); |
| 139 | // assertEqual("Vinc<em>en</em>t", $$("ul.pui-autocomplete-results li")[1].innerHTML); |
| 140 | // }}, |
| 79 | 141 | |
| 80 | | testShouldShowHideInfoMessage: function() { with(this) { |
| 81 | | createAutocomplete({infoMessage: "info message"}); |
| 82 | | |
| 83 | | // Show info message |
| 84 | | autoComplete.focus(); |
| 85 | | |
| 86 | | assert($$('.UI-widget-dropdown').first().visible()); |
| 87 | | assertEqual("info message", $$('.pui-autocomplete-message').first().innerHTML); |
| 88 | | |
| 89 | | // Hide info message |
| 90 | | autoComplete.blur(); |
| 91 | | assert(!$$('.UI-widget-dropdown').first()); |
| 92 | | }}, |
| 93 | | |
| 94 | | testShouldSetAutocompleteList: function() { with(this) { |
| 142 | testShouldSelectionByKeyboard: function() { with(this) { |
| 95 | 143 | createAutocomplete({}, true); |
| 96 | | assertEqual(8, autoComplete.list.length); |
| 97 | | assertEqual("Sébastien", autoComplete.list.first().text) |
| 98 | | }}, |
| 99 | | |
| 100 | | testShouldAddRemoveSelectedElement: function() { with(this) { |
| 101 | | createAutocomplete({}, true); |
| 102 | | |
| 103 | | // Add an element |
| 104 | | autoComplete.add("Sébastien", "foo"); |
| 105 | | assert("Sébastien", $$("#input-text ul li span").first().innerHTML); |
| 106 | | |
| 107 | | // Add another element |
| 108 | | autoComplete.add("Tobie"); |
| 109 | | assertEqual(2, $$("#input-text ul li.pui-autocomplete-box").length); |
| 110 | | |
| 111 | | // Remove first element added |
| 112 | | autoComplete.remove($$("#input-text ul li.pui-autocomplete-box").first()) |
| 113 | | assert("Tobie", $$("#input-text ul li span").first().innerHTML); |
| 114 | | }}, |
| 115 | | |
| 116 | | testShouldADisplayCompletion: function() { with(this) { |
| 117 | | createAutocomplete({}, true); |
| 118 | 144 | autoComplete.focus(); |
| 119 | | Event.simulateKeys(autoComplete.input, "en"); |
| 120 | | Event.simulateKey(autoComplete.input, "keyup", 101); |
| 121 | | |
| 122 | | assertEqual(2, $$("ul.pui-autocomplete-results li").length); |
| 145 | Event.simulateKeyboard(autoComplete.input, {text: "en"}); |
| 146 | autoComplete.focus(); |
| 147 | Event.simulateKey(autoComplete.input, 'keypress',{keyCode:Event.KEY_DOWN}); |
| 123 | 148 | assertEqual("Sébasti<em>en</em>", $$("ul.pui-autocomplete-results li")[0].innerHTML); |
| 124 | | assertEqual("Vinc<em>en</em>t", $$("ul.pui-autocomplete-results li")[1].innerHTML); |
| 125 | 149 | }} |
| 126 | 150 | |
| 127 | 151 | }) |
trunk/lib/prototype.js (Quick diff)
RSS feeds