resources/src/mediawiki/mediawiki.searchSuggest.js

   1 /*!
   2  * Add search suggestions to the search form.
   3  */
   4 ( function ( mw, $ ) {
   5         $( function () {
   6                 var api, map, resultRenderCache, searchboxesSelectors,
   7                         // Region where the suggestions box will appear directly below
   8                         // (using the same width). Can be a container element or the input
   9                         // itself, depending on what suits best in the environment.
  10                         // For Vector the suggestion box should align with the simpleSearch
  11                         // container's borders, in other skins it should align with the input
  12                         // element (not the search form, as that would leave the buttons
  13                         // vertically between the input and the suggestions).
  14                         $searchRegion = $( '#simpleSearch, #searchInput' ).first(),
  15                         $searchInput = $( '#searchInput' );
  16
  17                 // Compatibility map
  18                 map = {
  19                         // SimpleSearch is broken in Opera < 9.6
  20                         opera: [['>=', 9.6]],
  21                         // Older Konquerors are unable to position the suggestions correctly (bug 50805)
  22                         konqueror: [['>=', '4.11']],
  23                         docomo: false,
  24                         blackberry: false,
  25                         // Support for iOS 6 or higher. It has not been tested on iOS 5 or lower
  26                         ipod: [['>=', 6]],
  27                         iphone: [['>=', 6]]
  28                 };
  29
  30                 if ( !$.client.test( map ) ) {
  31                         return;
  32                 }
  33
  34                 // Compute form data for search suggestions functionality.
  35                 function computeResultRenderCache( context ) {
  36                         var $form, baseHref, linkParams;
  37
  38                         // Compute common parameters for links' hrefs
  39                         $form = context.config.$region.closest( 'form' );
  40
  41                         baseHref = $form.attr( 'action' );
  42                         baseHref += baseHref.indexOf( '?' ) > -1 ? '&' : '?';
  43
  44                         linkParams = $form.serializeObject();
  45
  46                         return {
  47                                 textParam: context.data.$textbox.attr( 'name' ),
  48                                 linkParams: linkParams,
  49                                 baseHref: baseHref
  50                         };
  51                 }
  52
  53                 // The function used to render the suggestions.
  54                 function renderFunction( text, context ) {
  55                         if ( !resultRenderCache ) {
  56                                 resultRenderCache = computeResultRenderCache( context );
  57                         }
  58
  59                         // linkParams object is modified and reused
  60                         resultRenderCache.linkParams[ resultRenderCache.textParam ] = text;
  61
  62                         // this is the container <div>, jQueryfied
  63                         this.text( text )
  64                                 .wrap(
  65                                         $( '<a>' )
  66                                                 .attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) )
  67                                                 .attr( 'title', text )
  68                                                 .addClass( 'mw-searchSuggest-link' )
  69                                 );
  70                 }
  71
  72                 function specialRenderFunction( query, context ) {
  73                         var $el = this;
  74
  75                         if ( !resultRenderCache ) {
  76                                 resultRenderCache = computeResultRenderCache( context );
  77                         }
  78
  79                         // linkParams object is modified and reused
  80                         resultRenderCache.linkParams[ resultRenderCache.textParam ] = query;
  81
  82                         if ( $el.children().length === 0 ) {
  83                                 $el
  84                                         .append(
  85                                                 $( '<div>' )
  86                                                         .addClass( 'special-label' )
  87                                                         .text( mw.msg( 'searchsuggest-containing' ) ),
  88                                                 $( '<div>' )
  89                                                         .addClass( 'special-query' )
  90                                                         .text( query )
  91                                         )
  92                                         .show();
  93                         } else {
  94                                 $el.find( '.special-query' )
  95                                         .text( query );
  96                         }
  97
  98                         if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) ) {
  99                                 $el.parent().attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) + '&fulltext=1' );
 100                         } else {
 101                                 $el.wrap(
 102                                         $( '<a>' )
 103                                                 .attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) + '&fulltext=1' )
 104                                                 .addClass( 'mw-searchSuggest-link' )
 105                                 );
 106                         }
 107                 }
 108
 109                 // Generic suggestions functionality for all search boxes
 110                 searchboxesSelectors = [
 111                         // Primary searchbox on every page in standard skins
 112                         '#searchInput',
 113                         // Special:Search
 114                         '#powerSearchText',
 115                         '#searchText',
 116                         // Generic selector for skins with multiple searchboxes (used by CologneBlue)
 117                         // and for MediaWiki itself (special pages with page title inputs)
 118                         '.mw-searchInput'
 119                 ];
 120                 $( searchboxesSelectors.join( ', ' ) )
 121                         .suggestions( {
 122                                 fetch: function ( query, response ) {
 123                                         var node = this[0];
 124
 125                                         api = api || new mw.Api();
 126
 127                                         $.data( node, 'request', api.get( {
 128                                                 action: 'opensearch',
 129                                                 search: query,
 130                                                 namespace: 0,
 131                                                 suggest: ''
 132                                         } ).done( function ( data ) {
 133                                                 response( data[ 1 ] );
 134                                         } ) );
 135                                 },
 136                                 cancel: function () {
 137                                         var node = this[0],
 138                                                 request = $.data( node, 'request' );
 139
 140                                         if ( request ) {
 141                                                 request.abort();
 142                                                 $.removeData( node, 'request' );
 143                                         }
 144                                 },
 145                                 result: {
 146                                         render: renderFunction,
 147                                         select: function () {
 148                                                 // allow the form to be submitted
 149                                                 return true;
 150                                         }
 151                                 },
 152                                 cache: true,
 153                                 highlightInput: true
 154                         } )
 155                         .bind( 'paste cut drop', function () {
 156                                 // make sure paste and cut events from the mouse and drag&drop events
 157                                 // trigger the keypress handler and cause the suggestions to update
 158                                 $( this ).trigger( 'keypress' );
 159                         } )
 160                         // In most skins (at least Monobook and Vector), the font-size is messed up in <body>.
 161                         // (they use 2 elements to get a sane font-height). So, instead of making exceptions for
 162                         // each skin or adding more stylesheets, just copy it from the active element so auto-fit.
 163                         .each( function () {
 164                                 var $this = $( this );
 165                                 $this
 166                                         .data( 'suggestions-context' )
 167                                         .data.$container
 168                                                 .css( 'fontSize', $this.css( 'fontSize' ) );
 169                         } );
 170
 171                 // Ensure that the thing is actually present!
 172                 if ( $searchRegion.length === 0 ) {
 173                         // Don't try to set anything up if simpleSearch is disabled sitewide.
 174                         // The loader code loads us if the option is present, even if we're
 175                         // not actually enabled (anymore).
 176                         return;
 177                 }
 178
 179                 // Special suggestions functionality for skin-provided search box
 180                 $searchInput.suggestions( {
 181                         special: {
 182                                 render: specialRenderFunction,
 183                                 select: function ( $input ) {
 184                                         $input.closest( 'form' )
 185                                                 .append( $( '<input type="hidden" name="fulltext" value="1"/>' ) );
 186                                         return true; // allow the form to be submitted
 187                                 }
 188                         },
 189                         $region: $searchRegion
 190                 } );
 191
 192                 // If the form includes any fallback fulltext search buttons, remove them
 193                 $searchInput.closest( 'form' ).find( '.mw-fallbackSearchButton' ).remove();
 194         } );
 195
 196 }( mediaWiki, jQuery ) );