2 * Add search suggestions to the search form.
6 // queries the wiki and calls response with the result
7 request: function ( api
, query
, response
, maxRows
) {
15 } ).done( function ( data
, jqXHR
) {
16 response( data
[ 1 ], {
17 type
: jqXHR
.getResponseHeader( 'X-OpenSearch-Type' ),
25 var api
, map
, searchboxesSelectors
,
26 // Region where the suggestions box will appear directly below
27 // (using the same width). Can be a container element or the input
28 // itself, depending on what suits best in the environment.
29 // For Vector the suggestion box should align with the simpleSearch
30 // container's borders, in other skins it should align with the input
31 // element (not the search form, as that would leave the buttons
32 // vertically between the input and the suggestions).
33 $searchRegion
= $( '#simpleSearch, #searchInput' ).first(),
34 $searchInput
= $( '#searchInput' ),
35 previousSearchText
= $searchInput
.val();
39 // SimpleSearch is broken in Opera < 9.6
40 opera
: [ [ '>=', 9.6 ] ],
41 // Older Konquerors are unable to position the suggestions correctly (bug 50805)
42 konqueror
: [ [ '>=', '4.11' ] ],
45 // Support for iOS 6 or higher. It has not been tested on iOS 5 or lower
46 ipod
: [ [ '>=', 6 ] ],
47 iphone
: [ [ '>=', 6 ] ]
50 if ( !$.client
.test( map
) ) {
54 // Compute form data for search suggestions functionality.
55 function getFormData( context
) {
56 var $form
, baseHref
, linkParams
;
58 if ( !context
.formData
) {
59 // Compute common parameters for links' hrefs
60 $form
= context
.config
.$region
.closest( 'form' );
62 baseHref
= $form
.attr( 'action' );
63 baseHref
+= baseHref
.indexOf( '?' ) > -1 ? '&' : '?';
65 linkParams
= $form
.serializeObject();
68 textParam
: context
.data
.$textbox
.attr( 'name' ),
69 linkParams
: linkParams
,
74 return context
.formData
;
78 * Callback that's run when the user changes the search input text
79 * 'this' is the search input box (jQuery object)
83 function onBeforeUpdate() {
84 var searchText
= this.val();
86 if ( searchText
&& searchText
!== previousSearchText
) {
87 mw
.track( 'mediawiki.searchSuggest', {
88 action
: 'session-start'
91 previousSearchText
= searchText
;
95 * Defines the location of autocomplete. Typically either
96 * header, which is in the top right of vector (for example)
97 * and content which identifies the main search bar on
98 * Special:Search. Defaults to header for skins that don't set
102 * @param {Object} context
105 function getInputLocation( context
) {
106 return context
.config
.$region
108 .find( '[data-search-loc]' )
109 .data( 'search-loc' ) || 'header';
113 * Callback that's run when suggestions have been updated either from the cache or the API
114 * 'this' is the search input box (jQuery object)
117 * @param {Object} metadata
119 function onAfterUpdate( metadata
) {
120 var context
= this.data( 'suggestionsContext' );
122 mw
.track( 'mediawiki.searchSuggest', {
123 action
: 'impression-results',
124 numberOfResults
: context
.config
.suggestions
.length
,
125 resultSetType
: metadata
.type
|| 'unknown',
126 query
: metadata
.query
,
127 inputLocation
: getInputLocation( context
)
131 // The function used to render the suggestions.
132 function renderFunction( text
, context
) {
133 var formData
= getFormData( context
),
134 textboxConfig
= context
.data
.$textbox
.data( 'mw-searchsuggest' ) || {};
136 // linkParams object is modified and reused
137 formData
.linkParams
[ formData
.textParam
] = text
;
139 // Allow trackers to attach tracking information, such
140 // as wprov, to clicked links.
141 mw
.track( 'mediawiki.searchSuggest', {
142 action
: 'render-one',
144 index
: context
.config
.suggestions
.indexOf( text
)
147 // this is the container <div>, jQueryfied
150 // wrap only as link, if the config doesn't disallow it
151 if ( textboxConfig
.wrapAsLink
!== false ) {
154 .attr( 'href', formData
.baseHref
+ $.param( formData
.linkParams
) )
155 .attr( 'title', text
)
156 .addClass( 'mw-searchSuggest-link' )
161 // The function used when the user makes a selection
162 function selectFunction( $input
, source
) {
163 var context
= $input
.data( 'suggestionsContext' ),
166 // Selecting via keyboard triggers a form submission. That will fire
167 // the submit-form event in addition to this click-result event.
168 if ( source
!== 'keyboard' ) {
169 mw
.track( 'mediawiki.searchSuggest', {
170 action
: 'click-result',
171 numberOfResults
: context
.config
.suggestions
.length
,
172 index
: context
.config
.suggestions
.indexOf( text
)
176 // allow the form to be submitted
180 function specialRenderFunction( query
, context
) {
182 formData
= getFormData( context
);
184 // linkParams object is modified and reused
185 formData
.linkParams
[ formData
.textParam
] = query
;
187 mw
.track( 'mediawiki.searchSuggest', {
188 action
: 'render-one',
190 index
: context
.config
.suggestions
.indexOf( query
)
193 if ( $el
.children().length
=== 0 ) {
197 .addClass( 'special-label' )
198 .text( mw
.msg( 'searchsuggest-containing' ) ),
200 .addClass( 'special-query' )
205 $el
.find( '.special-query' )
209 if ( $el
.parent().hasClass( 'mw-searchSuggest-link' ) ) {
210 $el
.parent().attr( 'href', formData
.baseHref
+ $.param( formData
.linkParams
) + '&fulltext=1' );
214 .attr( 'href', formData
.baseHref
+ $.param( formData
.linkParams
) + '&fulltext=1' )
215 .addClass( 'mw-searchSuggest-link' )
220 // Generic suggestions functionality for all search boxes
221 searchboxesSelectors
= [
222 // Primary searchbox on every page in standard skins
224 // Generic selector for skins with multiple searchboxes (used by CologneBlue)
225 // and for MediaWiki itself (special pages with page title inputs)
228 $( searchboxesSelectors
.join( ', ' ) )
230 fetch: function ( query
, response
, maxRows
) {
231 var node
= this[ 0 ];
233 api
= api
|| new mw
.Api();
235 $.data( node
, 'request', mw
.searchSuggest
.request( api
, query
, response
, maxRows
) );
237 cancel: function () {
238 var node
= this[ 0 ],
239 request
= $.data( node
, 'request' );
243 $.removeData( node
, 'request' );
247 render
: renderFunction
,
248 select: function () {
249 // allow the form to be submitted
254 before
: onBeforeUpdate
,
260 .on( 'paste cut drop', function () {
261 // make sure paste and cut events from the mouse and drag&drop events
262 // trigger the keypress handler and cause the suggestions to update
263 $( this ).trigger( 'keypress' );
265 // In most skins (at least Monobook and Vector), the font-size is messed up in <body>.
266 // (they use 2 elements to get a sane font-height). So, instead of making exceptions for
267 // each skin or adding more stylesheets, just copy it from the active element so auto-fit.
269 var $this = $( this );
271 .data( 'suggestions-context' )
273 .css( 'fontSize', $this.css( 'fontSize' ) );
276 // Ensure that the thing is actually present!
277 if ( $searchRegion
.length
=== 0 ) {
278 // Don't try to set anything up if simpleSearch is disabled sitewide.
279 // The loader code loads us if the option is present, even if we're
280 // not actually enabled (anymore).
284 // Special suggestions functionality and tracking for skin-provided search box
285 $searchInput
.suggestions( {
287 before
: onBeforeUpdate
,
291 render
: renderFunction
,
292 select
: selectFunction
295 render
: specialRenderFunction
,
296 select: function ( $input
, source
) {
297 var context
= $input
.data( 'suggestionsContext' ),
299 if ( source
=== 'mouse' ) {
300 // mouse click won't trigger form submission, so we need to send a click event
301 mw
.track( 'mediawiki.searchSuggest', {
302 action
: 'click-result',
303 numberOfResults
: context
.config
.suggestions
.length
,
304 index
: context
.config
.suggestions
.indexOf( text
)
307 $input
.closest( 'form' )
308 .append( $( '<input type="hidden" name="fulltext" value="1"/>' ) );
310 return true; // allow the form to be submitted
313 $region
: $searchRegion
316 $searchInput
.closest( 'form' )
317 // track the form submit event
318 .on( 'submit', function () {
319 var context
= $searchInput
.data( 'suggestionsContext' );
320 mw
.track( 'mediawiki.searchSuggest', {
321 action
: 'submit-form',
322 numberOfResults
: context
.config
.suggestions
.length
,
323 $form
: context
.config
.$region
.closest( 'form' ),
324 inputLocation
: getInputLocation( context
),
325 index
: context
.config
.suggestions
.indexOf(
326 context
.data
.$textbox
.val()
330 // If the form includes any fallback fulltext search buttons, remove them
331 .find( '.mw-fallbackSearchButton' ).remove();
334 }( mediaWiki
, jQuery
) );