| blob | bf38769021b4791fabcb88084320a569c7bd6bb1 |
1 /**
2 * This plugin provides a generic way to add suggestions to a text box.
3 *
4 * Usage:
5 *
6 * Set options:
7 * $( '#textbox' ).suggestions( { option1: value1, option2: value2 } );
8 * $( '#textbox' ).suggestions( option, value );
9 * Get option:
10 * value = $( '#textbox' ).suggestions( option );
11 * Initialize:
12 * $( '#textbox' ).suggestions();
13 *
14 * Options:
15 *
16 * fetch(query): Callback that should fetch suggestions and set the suggestions property.
17 * Executed in the context of the textbox
18 * Type: Function
19 * cancel: Callback function to call when any pending asynchronous suggestions fetches
20 * should be canceled. Executed in the context of the textbox
21 * Type: Function
22 * special: Set of callbacks for rendering and selecting
23 * Type: Object of Functions 'render' and 'select'
24 * result: Set of callbacks for rendering and selecting
25 * Type: Object of Functions 'render' and 'select'
26 * $region: jQuery selection of element to place the suggestions below and match width of
27 * Type: jQuery Object, Default: $(this)
28 * suggestions: Suggestions to display
29 * Type: Array of strings
30 * maxRows: Maximum number of suggestions to display at one time
31 * Type: Number, Range: 1 - 100, Default: 7
32 * delay: Number of ms to wait for the user to stop typing
33 * Type: Number, Range: 0 - 1200, Default: 120
34 * submitOnClick: Whether to submit the form containing the textbox when a suggestion is clicked
35 * Type: Boolean, Default: false
36 * maxExpandFactor: Maximum suggestions box width relative to the textbox width. If set
37 * to e.g. 2, the suggestions box will never be grown beyond 2 times the width of the textbox.
38 * Type: Number, Range: 1 - infinity, Default: 3
39 * expandFrom: Which direction to offset the suggestion box from.
40 * Values 'start' and 'end' translate to left and right respectively depending on the
41 * directionality of the current document, according to $( 'html' ).css( 'direction' ).
42 * Type: String, default: 'auto', options: 'left', 'right', 'start', 'end', 'auto'.
43 * positionFromLeft: Sets expandFrom=left, for backwards compatibility
44 * Type: Boolean, Default: true
45 * highlightInput: Whether to hightlight matched portions of the input or not
46 * Type: Boolean, Default: false
47 */
48 ( function ( $ ) {
50 $.suggestions = {
51 /**
52 * Cancel any delayed maybeFetch() call and callback the context so
53 * they can cancel any async fetching if they use AJAX or something.
54 */
55 cancel: function ( context ) {
56 if ( context.data.timerID !== null ) {
57 clearTimeout( context.data.timerID );
58 }
59 if ( $.isFunction( context.config.cancel ) ) {
60 context.config.cancel.call( context.data.$textbox );
61 }
62 },
64 /**
65 * Restore the text the user originally typed in the textbox, before it
66 * was overwritten by highlight(). This restores the value the currently
67 * displayed suggestions are based on, rather than the value just before
68 * highlight() overwrote it; the former is arguably slightly more sensible.
69 */
70 restore: function ( context ) {
71 context.data.$textbox.val( context.data.prevText );
72 },
74 /**
75 * Ask the user-specified callback for new suggestions. Any previous delayed
76 * call to this function still pending will be canceled. If the value in the
77 * textbox is empty or hasn't changed since the last time suggestions were fetched,
78 * this function does nothing.
79 * @param {Boolean} delayed Whether or not to delay this by the currently configured amount of time
80 */
81 update: function ( context, delayed ) {
82 // Only fetch if the value in the textbox changed and is not empty, or if the results were hidden
83 // if the textbox is empty then clear the result div, but leave other settings intouched
84 function maybeFetch() {
85 if ( context.data.$textbox.val().length === 0 ) {
86 context.data.$container.hide();
87 context.data.prevText = '';
88 } else if (
89 context.data.$textbox.val() !== context.data.prevText ||
90 !context.data.$container.is( ':visible' )
91 ) {
92 if ( typeof context.config.fetch === 'function' ) {
93 context.data.prevText = context.data.$textbox.val();
94 context.config.fetch.call( context.data.$textbox, context.data.$textbox.val() );
95 }
96 }
97 }
99 // Cancels any delayed maybeFetch call, and invokes context.config.cancel.
100 $.suggestions.cancel( context );
102 if ( delayed ) {
103 // To avoid many started/aborted requests while typing, we're gonna take a short
104 // break before trying to fetch data.
105 context.data.timerID = setTimeout( maybeFetch, context.config.delay );
106 } else {
107 maybeFetch();
108 }
109 $.suggestions.special( context );
110 },
112 special: function ( context ) {
113 // Allow custom rendering - but otherwise don't do any rendering
114 if ( typeof context.config.special.render === 'function' ) {
115 // Wait for the browser to update the value
116 setTimeout( function () {
117 // Render special
118 var $special = context.data.$container.find( '.suggestions-special' );
119 context.config.special.render.call( $special, context.data.$textbox.val(), context );
120 }, 1 );
121 }
122 },
124 /**
125 * Sets the value of a property, and updates the widget accordingly
126 * @param property String Name of property
127 * @param value Mixed Value to set property with
128 */
129 configure: function ( context, property, value ) {
130 var newCSS,
131 $autoEllipseMe, $result, $results, childrenWidth,
132 i, expWidth, matchedText, maxWidth, text;
134 // Validate creation using fallback values
135 switch( property ) {
136 case 'fetch':
137 case 'cancel':
138 case 'special':
139 case 'result':
140 case '$region':
141 case 'expandFrom':
142 context.config[property] = value;
143 break;
144 case 'suggestions':
145 context.config[property] = value;
146 // Update suggestions
147 if ( context.data !== undefined ) {
148 if ( context.data.$textbox.val().length === 0 ) {
149 // Hide the div when no suggestion exist
150 context.data.$container.hide();
151 } else {
152 // Rebuild the suggestions list
153 context.data.$container.show();
154 // Update the size and position of the list
155 newCSS = {
156 top: context.config.$region.offset().top + context.config.$region.outerHeight(),
157 bottom: 'auto',
158 width: context.config.$region.outerWidth(),
159 height: 'auto'
160 };
162 // Process expandFrom, after this it is set to left or right.
163 context.config.expandFrom = ( function ( expandFrom ) {
164 var regionWidth, docWidth, regionCenter, docCenter,
165 docDir = $( document.documentElement ).css( 'direction' ),
166 $region = context.config.$region;
168 // Backwards compatible
169 if ( context.config.positionFromLeft ) {
170 expandFrom = 'left';
172 // Catch invalid values, default to 'auto'
173 } else if ( $.inArray( expandFrom, ['left', 'right', 'start', 'end', 'auto'] ) === -1 ) {
174 expandFrom = 'auto';
175 }
177 if ( expandFrom === 'auto' ) {
178 if ( $region.data( 'searchsuggest-expand-dir' ) ) {
179 // If the markup explicitly contains a direction, use it.
180 expandFrom = $region.data( 'searchsuggest-expand-dir' );
181 } else {
182 regionWidth = $region.outerWidth();
183 docWidth = $( document ).width();
184 if ( ( regionWidth / docWidth ) > 0.85 ) {
185 // If the input size takes up more than 85% of the document horizontally
186 // expand the suggestions to the writing direction's native end.
187 expandFrom = 'start';
188 } else {
189 // Calculate the center points of the input and document
190 regionCenter = $region.offset().left + regionWidth / 2;
191 docCenter = docWidth / 2;
192 if ( Math.abs( regionCenter - docCenter ) / docCenter < 0.10 ) {
193 // If the input's center is within 10% of the document center
194 // use the writing direction's native end.
195 expandFrom = 'start';
196 } else {
197 // Otherwise expand the input from the closest side of the page,
198 // towards the side of the page with the most free open space
199 expandFrom = regionCenter > docCenter ? 'right' : 'left';
200 }
201 }
202 }
203 }
205 if ( expandFrom === 'start' ) {
206 expandFrom = docDir === 'rtl' ? 'right': 'left';
208 } else if ( expandFrom === 'end' ) {
209 expandFrom = docDir === 'rtl' ? 'left': 'right';
210 }
212 return expandFrom;
214 }( context.config.expandFrom ) );
216 if ( context.config.expandFrom === 'left' ) {
217 // Expand from left
218 newCSS.left = context.config.$region.offset().left;
219 newCSS.right = 'auto';
220 } else {
221 // Expand from right
222 newCSS.left = 'auto';
223 newCSS.right = $( document ).width() - ( context.config.$region.offset().left + context.config.$region.outerWidth() );
224 }
226 context.data.$container.css( newCSS );
227 $results = context.data.$container.children( '.suggestions-results' );
228 $results.empty();
229 expWidth = -1;
230 $autoEllipseMe = $( [] );
231 matchedText = null;
232 for ( i = 0; i < context.config.suggestions.length; i++ ) {
233 /*jshint loopfunc:true */
234 text = context.config.suggestions[i];
235 $result = $( '<div>' )
236 .addClass( 'suggestions-result' )
237 .attr( 'rel', i )
238 .data( 'text', context.config.suggestions[i] )
239 .mousemove( function () {
240 context.data.selectedWithMouse = true;
241 $.suggestions.highlight(
242 context,
243 $(this).closest( '.suggestions-results .suggestions-result' ),
244 false
245 );
246 } )
247 .appendTo( $results );
248 // Allow custom rendering
249 if ( typeof context.config.result.render === 'function' ) {
250 context.config.result.render.call( $result, context.config.suggestions[i], context );
251 } else {
252 // Add <span> with text
253 $result.append( $( '<span>' )
254 .css( 'whiteSpace', 'nowrap' )
255 .text( text )
256 );
257 }
259 if ( context.config.highlightInput ) {
260 matchedText = context.data.prevText;
261 }
263 // Widen results box if needed
264 // New width is only calculated here, applied later
265 childrenWidth = $result.children().outerWidth();
266 if ( childrenWidth > $result.width() && childrenWidth > expWidth ) {
267 // factor in any padding, margin, or border space on the parent
268 expWidth = childrenWidth + ( context.data.$container.width() - $result.width() );
269 }
270 $autoEllipseMe = $autoEllipseMe.add( $result );
271 }
272 // Apply new width for results box, if any
273 if ( expWidth > context.data.$container.width() ) {
274 maxWidth = context.config.maxExpandFactor*context.data.$textbox.width();
275 context.data.$container.width( Math.min( expWidth, maxWidth ) );
276 }
277 // autoEllipse the results. Has to be done after changing the width
278 $autoEllipseMe.autoEllipsis( {
279 hasSpan: true,
280 tooltip: true,
281 matchText: matchedText
282 } );
283 }
284 }
285 break;
286 case 'maxRows':
287 context.config[property] = Math.max( 1, Math.min( 100, value ) );
288 break;
289 case 'delay':
290 context.config[property] = Math.max( 0, Math.min( 1200, value ) );
291 break;
292 case 'maxExpandFactor':
293 context.config[property] = Math.max( 1, value );
294 break;
295 case 'submitOnClick':
296 case 'positionFromLeft':
297 case 'highlightInput':
298 context.config[property] = value ? true : false;
299 break;
300 }
301 },
303 /**
304 * Highlight a result in the results table
305 * @param result <tr> to highlight: jQuery object, or 'prev' or 'next'
306 * @param updateTextbox If true, put the suggestion in the textbox
307 */
308 highlight: function ( context, result, updateTextbox ) {
309 var selected = context.data.$container.find( '.suggestions-result-current' );
310 if ( !result.get || selected.get( 0 ) !== result.get( 0 ) ) {
311 if ( result === 'prev' ) {
312 if( selected.hasClass( 'suggestions-special' ) ) {
313 result = context.data.$container.find( '.suggestions-result:last' );
314 } else {
315 result = selected.prev();
316 if ( !( result.length && result.hasClass( 'suggestions-result' ) ) ) {
317 // there is something in the DOM between selected element and the wrapper, bypass it
318 result = selected.parents( '.suggestions-results > *' ).prev().find( '.suggestions-result' ).eq(0);
319 }
321 if ( selected.length === 0 ) {
322 // we are at the beginning, so lets jump to the last item
323 if ( context.data.$container.find( '.suggestions-special' ).html() !== '' ) {
324 result = context.data.$container.find( '.suggestions-special' );
325 } else {
326 result = context.data.$container.find( '.suggestions-results .suggestions-result:last' );
327 }
328 }
329 }
330 } else if ( result === 'next' ) {
331 if ( selected.length === 0 ) {
332 // No item selected, go to the first one
333 result = context.data.$container.find( '.suggestions-results .suggestions-result:first' );
334 if ( result.length === 0 && context.data.$container.find( '.suggestions-special' ).html() !== '' ) {
335 // No suggestion exists, go to the special one directly
336 result = context.data.$container.find( '.suggestions-special' );
337 }
338 } else {
339 result = selected.next();
340 if ( !( result.length && result.hasClass( 'suggestions-result' ) ) ) {
341 // there is something in the DOM between selected element and the wrapper, bypass it
342 result = selected.parents( '.suggestions-results > *' ).next().find( '.suggestions-result' ).eq(0);
343 }
345 if ( selected.hasClass( 'suggestions-special' ) ) {
346 result = $( [] );
347 } else if (
348 result.length === 0 &&
349 context.data.$container.find( '.suggestions-special' ).html() !== ''
350 ) {
351 // We were at the last item, jump to the specials!
352 result = context.data.$container.find( '.suggestions-special' );
353 }
354 }
355 }
356 selected.removeClass( 'suggestions-result-current' );
357 result.addClass( 'suggestions-result-current' );
358 }
359 if ( updateTextbox ) {
360 if ( result.length === 0 || result.is( '.suggestions-special' ) ) {
361 $.suggestions.restore( context );
362 } else {
363 context.data.$textbox.val( result.data( 'text' ) );
364 // .val() doesn't call any event handlers, so
365 // let the world know what happened
366 context.data.$textbox.change();
367 }
368 context.data.$textbox.trigger( 'change' );
369 }
370 },
372 /**
373 * Respond to keypress event
374 * @param key Integer Code of key pressed
375 */
376 keypress: function ( e, context, key ) {
377 var selected,
378 wasVisible = context.data.$container.is( ':visible' ),
379 preventDefault = false;
381 switch ( key ) {
382 case 40: // Arrow down
383 if ( wasVisible ) {
384 $.suggestions.highlight( context, 'next', true );
385 context.data.selectedWithMouse = false;
386 } else {
387 $.suggestions.update( context, false );
388 }
389 preventDefault = true;
390 break;
391 case 38: // Arrow up
392 if ( wasVisible ) {
393 $.suggestions.highlight( context, 'prev', true );
394 context.data.selectedWithMouse = false;
395 }
396 preventDefault = wasVisible;
397 break;
398 case 27: // Escape
399 context.data.$container.hide();
400 $.suggestions.restore( context );
401 $.suggestions.cancel( context );
402 context.data.$textbox.trigger( 'change' );
403 preventDefault = wasVisible;
404 break;
405 case 13: // Enter
406 context.data.$container.hide();
407 preventDefault = wasVisible;
408 selected = context.data.$container.find( '.suggestions-result-current' );
409 if ( selected.length === 0 || context.data.selectedWithMouse ) {
410 // if nothing is selected OR if something was selected with the mouse,
411 // cancel any current requests and submit the form
412 $.suggestions.cancel( context );
413 context.config.$region.closest( 'form' ).submit();
414 } else if ( selected.is( '.suggestions-special' ) ) {
415 if ( typeof context.config.special.select === 'function' ) {
416 context.config.special.select.call( selected, context.data.$textbox );
417 }
418 } else {
419 if ( typeof context.config.result.select === 'function' ) {
420 $.suggestions.highlight( context, selected, true );
421 context.config.result.select.call( selected, context.data.$textbox );
422 } else {
423 $.suggestions.highlight( context, selected, true );
424 }
425 }
426 break;
427 default:
428 $.suggestions.update( context, true );
429 break;
430 }
431 if ( preventDefault ) {
432 e.preventDefault();
433 e.stopImmediatePropagation();
434 }
435 }
436 };
437 $.fn.suggestions = function () {
439 // Multi-context fields
440 var returnValue,
441 args = arguments;
443 $(this).each( function () {
444 var context, key;
446 /* Construction / Loading */
448 context = $(this).data( 'suggestions-context' );
449 if ( context === undefined || context === null ) {
450 context = {
451 config: {
452 fetch: function () {},
453 cancel: function () {},
454 special: {},
455 result: {},
456 $region: $(this),
457 suggestions: [],
458 maxRows: 7,
459 delay: 120,
460 submitOnClick: false,
461 maxExpandFactor: 3,
462 expandFrom: 'auto',
463 highlightInput: false
464 }
465 };
466 }
468 /* API */
470 // Handle various calling styles
471 if ( args.length > 0 ) {
472 if ( typeof args[0] === 'object' ) {
473 // Apply set of properties
474 for ( key in args[0] ) {
475 $.suggestions.configure( context, key, args[0][key] );
476 }
477 } else if ( typeof args[0] === 'string' ) {
478 if ( args.length > 1 ) {
479 // Set property values
480 $.suggestions.configure( context, args[0], args[1] );
481 } else if ( returnValue === null || returnValue === undefined ) {
482 // Get property values, but don't give access to internal data - returns only the first
483 returnValue = ( args[0] in context.config ? undefined : context.config[args[0]] );
484 }
485 }
486 }
488 /* Initialization */
490 if ( context.data === undefined ) {
491 context.data = {
492 // ID of running timer
493 timerID: null,
495 // Text in textbox when suggestions were last fetched
496 prevText: null,
498 // Number of results visible without scrolling
499 visibleResults: 0,
501 // Suggestion the last mousedown event occured on
502 mouseDownOn: $( [] ),
503 $textbox: $(this),
504 selectedWithMouse: false
505 };
507 context.data.$container = $( '<div>' )
508 .css( 'display', 'none' )
509 .addClass( 'suggestions' )
510 .append(
511 $( '<div>' ).addClass( 'suggestions-results' )
512 // Can't use click() because the container div is hidden when the
513 // textbox loses focus. Instead, listen for a mousedown followed
514 // by a mouseup on the same div.
515 .mousedown( function ( e ) {
516 context.data.mouseDownOn = $( e.target ).closest( '.suggestions-results .suggestions-result' );
517 } )
518 .mouseup( function ( e ) {
519 var $result = $( e.target ).closest( '.suggestions-results .suggestions-result' ),
520 $other = context.data.mouseDownOn;
522 context.data.mouseDownOn = $( [] );
523 if ( $result.get( 0 ) !== $other.get( 0 ) ) {
524 return;
525 }
526 // do not interfere with non-left clicks or if modifier keys are pressed (e.g. ctrl-click)
527 if ( !( e.which !== 1 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) ) {
528 $.suggestions.highlight( context, $result, true );
529 context.data.$container.hide();
530 if ( typeof context.config.result.select === 'function' ) {
531 context.config.result.select.call( $result, context.data.$textbox );
532 }
533 }
534 // but still restore focus to the textbox, so that the suggestions will be hidden properly
535 context.data.$textbox.focus();
536 } )
537 )
538 .append(
539 $( '<div>' ).addClass( 'suggestions-special' )
540 // Can't use click() because the container div is hidden when the
541 // textbox loses focus. Instead, listen for a mousedown followed
542 // by a mouseup on the same div.
543 .mousedown( function ( e ) {
544 context.data.mouseDownOn = $( e.target ).closest( '.suggestions-special' );
545 } )
546 .mouseup( function ( e ) {
547 var $special = $( e.target ).closest( '.suggestions-special' ),
548 $other = context.data.mouseDownOn;
550 context.data.mouseDownOn = $( [] );
551 if ( $special.get( 0 ) !== $other.get( 0 ) ) {
552 return;
553 }
554 // do not interfere with non-left clicks or if modifier keys are pressed (e.g. ctrl-click)
555 if ( !( e.which !== 1 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) ) {
556 context.data.$container.hide();
557 if ( typeof context.config.special.select === 'function' ) {
558 context.config.special.select.call( $special, context.data.$textbox );
559 }
560 }
561 // but still restore focus to the textbox, so that the suggestions will be hidden properly
562 context.data.$textbox.focus();
563 } )
564 .mousemove( function ( e ) {
565 context.data.selectedWithMouse = true;
566 $.suggestions.highlight(
567 context, $( e.target ).closest( '.suggestions-special' ), false
568 );
569 } )
570 )
571 .appendTo( $( 'body' ) );
573 $(this)
574 // Stop browser autocomplete from interfering
575 .attr( 'autocomplete', 'off')
576 .keydown( function ( e ) {
577 // Store key pressed to handle later
578 context.data.keypressed = e.which;
579 context.data.keypressedCount = 0;
581 switch ( context.data.keypressed ) {
582 // This preventDefault logic is duplicated from
583 // $.suggestions.keypress(), which sucks
584 case 40: // Arrow down
585 e.preventDefault();
586 e.stopImmediatePropagation();
587 break;
588 case 38: // Arrow up
589 case 27: // Escape
590 case 13: // Enter
591 if ( context.data.$container.is( ':visible' ) ) {
592 e.preventDefault();
593 e.stopImmediatePropagation();
594 }
595 }
596 } )
597 .keypress( function ( e ) {
598 context.data.keypressedCount++;
599 $.suggestions.keypress( e, context, context.data.keypressed );
600 } )
601 .keyup( function ( e ) {
602 // Some browsers won't throw keypress() for arrow keys. If we got a keydown and a keyup without a
603 // keypress in between, solve it
604 if ( context.data.keypressedCount === 0 ) {
605 $.suggestions.keypress( e, context, context.data.keypressed );
606 }
607 } )
608 .blur( function () {
609 // When losing focus because of a mousedown
610 // on a suggestion, don't hide the suggestions
611 if ( context.data.mouseDownOn.length > 0 ) {
612 return;
613 }
614 context.data.$container.hide();
615 $.suggestions.cancel( context );
616 } );
617 }
619 // Store the context for next time
620 $(this).data( 'suggestions-context', context );
621 } );
622 return returnValue !== undefined ? returnValue : $(this);
623 };
625 }( jQuery ) );