resources/mediawiki/mediawiki.searchSuggest.js

   1 /**
   2  * Add search suggestions to the search form.
   3  */
   4 ( function ( mw, $ ) {
   5         $( document ).ready( function ( $ ) {
   6                 var 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                         browsers: {
  20                                 // Left-to-right languages
  21                                 ltr: {
  22                                         // SimpleSearch is broken in Opera < 9.6
  23                                         opera: [['>=', 9.6]],
  24                                         docomo: false,
  25                                         blackberry: false,
  26                                         ipod: false,
  27                                         iphone: false
  28                                 },
  29                                 // Right-to-left languages
  30                                 rtl: {
  31                                         opera: [['>=', 9.6]],
  32                                         docomo: false,
  33                                         blackberry: false,
  34                                         ipod: false,
  35                                         iphone: false
  36                                 }
  37                         }
  38                 };
  39
  40                 if ( !$.client.test( map ) ) {
  41                         return;
  42                 }
  43
  44                 // Compute form data for search suggestions functionality.
  45                 function computeResultRenderCache( context ) {
  46                         var $form, formAction, baseHref, linkParams;
  47
  48                         // Compute common parameters for links' hrefs
  49                         $form = context.config.$region.closest( 'form' );
  50
  51                         formAction = $form.attr( 'action' );
  52                         baseHref = formAction + ( formAction.match(/\?/) ? '&' : '?' );
  53
  54                         linkParams = {};
  55                         $.each( $form.serializeArray(), function ( idx, obj ) {
  56                                 linkParams[ obj.name ] = obj.value;
  57                         } );
  58
  59                         return {
  60                                 textParam: context.data.$textbox.attr( 'name' ),
  61                                 linkParams: linkParams,
  62                                 baseHref: baseHref
  63                         };
  64                 }
  65
  66                 // The function used to render the suggestions.
  67                 function renderFunction( text, context ) {
  68                         if ( !resultRenderCache ) {
  69                                 resultRenderCache = computeResultRenderCache( context );
  70                         }
  71
  72                         // linkParams object is modified and reused
  73                         resultRenderCache.linkParams[ resultRenderCache.textParam ] = text;
  74
  75                         // this is the container <div>, jQueryfied
  76                         this
  77                                 .append(
  78                                         // the <span> is needed for $.autoEllipsis to work
  79                                         $( '<span>' )
  80                                                 .css( 'whiteSpace', 'nowrap' )
  81                                                 .text( text )
  82                                 )
  83                                 .wrap(
  84                                         $( '<a>' )
  85                                                 .attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) )
  86                                                 .addClass( 'mw-searchSuggest-link' )
  87                                 );
  88                 }
  89
  90                 function specialRenderFunction( query, context ) {
  91                         var $el = this;
  92
  93                         if ( !resultRenderCache ) {
  94                                 resultRenderCache = computeResultRenderCache( context );
  95                         }
  96
  97                         // linkParams object is modified and reused
  98                         resultRenderCache.linkParams[ resultRenderCache.textParam ] = query;
  99
 100                         if ( $el.children().length === 0 ) {
 101                                 $el
 102                                         .append(
 103                                                 $( '<div>' )
 104                                                         .addClass( 'special-label' )
 105                                                         .text( mw.msg( 'searchsuggest-containing' ) ),
 106                                                 $( '<div>' )
 107                                                         .addClass( 'special-query' )
 108                                                         .text( query )
 109                                                         .autoEllipsis()
 110                                         )
 111                                         .show();
 112                         } else {
 113                                 $el.find( '.special-query' )
 114                                         .text( query )
 115                                         .autoEllipsis();
 116                         }
 117
 118                         if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) ) {
 119                                 $el.parent().attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) + '&fulltext=1' );
 120                         } else {
 121                                 $el.wrap(
 122                                         $( '<a>' )
 123                                                 .attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) + '&fulltext=1' )
 124                                                 .addClass( 'mw-searchSuggest-link' )
 125                                 );
 126                         }
 127                 }
 128
 129                 // General suggestions functionality for all search boxes
 130                 searchboxesSelectors = [
 131                         // Primary searchbox on every page in standard skins
 132                         '#searchInput',
 133                         // Secondary searchbox in legacy skins (LegacyTemplate::searchForm uses id "searchInput + unique id")
 134                         '#searchInput2',
 135                         // Special:Search
 136                         '#powerSearchText',
 137                         '#searchText',
 138                         // Generic selector for skins with multiple searchboxes (used by CologneBlue)
 139                         '.mw-searchInput'
 140                 ];
 141                 $( searchboxesSelectors.join(', ') )
 142                         .suggestions( {
 143                                 fetch: function ( query ) {
 144                                         var $el, jqXhr;
 145
 146                                         if ( query.length !== 0 ) {
 147                                                 $el = $(this);
 148                                                 jqXhr = $.ajax( {
 149                                                         url: mw.util.wikiScript( 'api' ),
 150                                                         data: {
 151                                                                 format: 'json',
 152                                                                 action: 'opensearch',
 153                                                                 search: query,
 154                                                                 namespace: 0,
 155                                                                 suggest: ''
 156                                                         },
 157                                                         dataType: 'json',
 158                                                         success: function ( data ) {
 159                                                                 if ( $.isArray( data ) && data.length ) {
 160                                                                         $el.suggestions( 'suggestions', data[1] );
 161                                                                 }
 162                                                         }
 163                                                 });
 164                                                 $el.data( 'request', jqXhr );
 165                                         }
 166                                 },
 167                                 cancel: function () {
 168                                         var jqXhr = $(this).data( 'request' );
 169                                         // If the delay setting has caused the fetch to have not even happened
 170                                         // yet, the jqXHR object will have never been set.
 171                                         if ( jqXhr && $.isFunction( jqXhr.abort ) ) {
 172                                                 jqXhr.abort();
 173                                                 $(this).removeData( 'request' );
 174                                         }
 175                                 },
 176                                 result: {
 177                                         render: renderFunction,
 178                                         select: function ( $input ) {
 179                                                 $input.closest( 'form' ).submit();
 180                                         }
 181                                 },
 182                                 delay: 120,
 183                                 highlightInput: true
 184                         } )
 185                         .bind( 'paste cut drop', function () {
 186                                 // make sure paste and cut events from the mouse and drag&drop events
 187                                 // trigger the keypress handler and cause the suggestions to update
 188                                 $( this ).trigger( 'keypress' );
 189                         } );
 190
 191                 // Ensure that the thing is actually present!
 192                 if ( $searchRegion.length === 0 ) {
 193                         // Don't try to set anything up if simpleSearch is disabled sitewide.
 194                         // The loader code loads us if the option is present, even if we're
 195                         // not actually enabled (anymore).
 196                         return;
 197                 }
 198
 199                 // Placeholder text for search box
 200                 $searchInput
 201                         .attr( 'placeholder', mw.msg( 'searchsuggest-search' ) )
 202                         .placeholder();
 203
 204                 // Special suggestions functionality for skin-provided search box
 205                 $searchInput.suggestions( {
 206                         result: {
 207                                 render: renderFunction,
 208                                 select: function ( $input ) {
 209                                         $input.closest( 'form' ).submit();
 210                                 }
 211                         },
 212                         special: {
 213                                 render: specialRenderFunction,
 214                                 select: function ( $input ) {
 215                                         $input.closest( 'form' ).append(
 216                                                 $( '<input type="hidden" name="fulltext" value="1"/>' )
 217                                         );
 218                                         $input.closest( 'form' ).submit();
 219                                 }
 220                         },
 221                         $region: $searchRegion
 222                 } );
 223
 224                 // In most skins (at least Monobook and Vector), the font-size is messed up in <body>.
 225                 // (they use 2 elements to get a sane font-height). So, instead of making exceptions for
 226                 // each skin or adding more stylesheets, just copy it from the active element so auto-fit.
 227                 $searchInput
 228                         .data( 'suggestions-context' )
 229                         .data.$container
 230                                 .css( 'fontSize', $searchInput.css( 'fontSize' ) );
 231
 232         } );
 233
 234 }( mediaWiki, jQuery ) );