1 /* eslint-disable no-restricted-properties */
3 * Add search suggestions to the search form.
6 // eslint-disable-next-line jquery/no-map-util
7 var searchNS
= $.map( mw
.config
.get( 'wgFormattedNamespaces' ), function ( nsName
, nsID
) {
8 if ( nsID
>= 0 && mw
.user
.options
.get( 'searchNs' + nsID
) ) {
9 // Cast string key to number
10 return Number( nsID
);
14 // queries the wiki and calls response with the result
15 request: function ( api
, query
, response
, maxRows
, namespace ) {
20 namespace: namespace || searchNS
,
23 } ).done( function ( data
, jqXHR
) {
24 response( data
[ 1 ], {
25 type
: jqXHR
.getResponseHeader( 'X-OpenSearch-Type' ),
26 searchId
: jqXHR
.getResponseHeader( 'X-Search-ID' ),
34 var api
, searchboxesSelectors
,
35 // Region where the suggestions box will appear directly below
36 // (using the same width). Can be a container element or the input
37 // itself, depending on what suits best in the environment.
38 // For Vector the suggestion box should align with the simpleSearch
39 // container's borders, in other skins it should align with the input
40 // element (not the search form, as that would leave the buttons
41 // vertically between the input and the suggestions).
42 $searchRegion
= $( '#simpleSearch, #searchInput' ).first(),
43 $searchInput
= $( '#searchInput' ),
44 previousSearchText
= $searchInput
.val();
46 // Compute form data for search suggestions functionality.
47 function getFormData( context
) {
48 var $form
, baseHref
, linkParams
;
50 if ( !context
.formData
) {
51 // Compute common parameters for links' hrefs
52 $form
= context
.config
.$region
.closest( 'form' );
54 baseHref
= $form
.attr( 'action' );
55 baseHref
+= baseHref
.indexOf( '?' ) > -1 ? '&' : '?';
57 linkParams
= $form
.serializeObject();
60 textParam
: context
.data
.$textbox
.attr( 'name' ),
61 linkParams
: linkParams
,
66 return context
.formData
;
70 * Callback that's run when the user changes the search input text
71 * 'this' is the search input box (jQuery object)
75 function onBeforeUpdate() {
76 var searchText
= this.val();
78 if ( searchText
&& searchText
!== previousSearchText
) {
79 mw
.track( 'mediawiki.searchSuggest', {
80 action
: 'session-start'
83 previousSearchText
= searchText
;
87 * Defines the location of autocomplete. Typically either
88 * header, which is in the top right of vector (for example)
89 * and content which identifies the main search bar on
90 * Special:Search. Defaults to header for skins that don't set
94 * @param {Object} context
97 function getInputLocation( context
) {
98 return context
.config
.$region
100 .find( '[data-search-loc]' )
101 .data( 'search-loc' ) || 'header';
105 * Callback that's run when suggestions have been updated either from the cache or the API
106 * 'this' is the search input box (jQuery object)
109 * @param {Object} metadata
111 function onAfterUpdate( metadata
) {
112 var context
= this.data( 'suggestionsContext' );
114 mw
.track( 'mediawiki.searchSuggest', {
115 action
: 'impression-results',
116 numberOfResults
: context
.config
.suggestions
.length
,
117 resultSetType
: metadata
.type
|| 'unknown',
118 searchId
: metadata
.searchId
|| null,
119 query
: metadata
.query
,
120 inputLocation
: getInputLocation( context
)
124 // The function used to render the suggestions.
125 function renderFunction( text
, context
) {
126 var formData
= getFormData( context
),
127 textboxConfig
= context
.data
.$textbox
.data( 'mw-searchsuggest' ) || {};
129 // linkParams object is modified and reused
130 formData
.linkParams
[ formData
.textParam
] = text
;
132 // Allow trackers to attach tracking information, such
133 // as wprov, to clicked links.
134 mw
.track( 'mediawiki.searchSuggest', {
135 action
: 'render-one',
137 index
: context
.config
.suggestions
.indexOf( text
)
140 // this is the container <div>, jQueryfied
143 // wrap only as link, if the config doesn't disallow it
144 if ( textboxConfig
.wrapAsLink
!== false ) {
147 .attr( 'href', formData
.baseHref
+ $.param( formData
.linkParams
) )
148 .attr( 'title', text
)
149 .addClass( 'mw-searchSuggest-link' )
154 // The function used when the user makes a selection
155 function selectFunction( $input
, source
) {
156 var context
= $input
.data( 'suggestionsContext' ),
159 // Selecting via keyboard triggers a form submission. That will fire
160 // the submit-form event in addition to this click-result event.
161 if ( source
!== 'keyboard' ) {
162 mw
.track( 'mediawiki.searchSuggest', {
163 action
: 'click-result',
164 numberOfResults
: context
.config
.suggestions
.length
,
165 index
: context
.config
.suggestions
.indexOf( text
)
169 // allow the form to be submitted
173 function specialRenderFunction( query
, context
) {
175 formData
= getFormData( context
);
177 // linkParams object is modified and reused
178 formData
.linkParams
[ formData
.textParam
] = query
;
180 mw
.track( 'mediawiki.searchSuggest', {
181 action
: 'render-one',
183 index
: context
.config
.suggestions
.indexOf( query
)
186 if ( $el
.children().length
=== 0 ) {
190 .addClass( 'special-label' )
191 .text( mw
.msg( 'searchsuggest-containing' ) ),
193 .addClass( 'special-query' )
198 $el
.find( '.special-query' )
202 if ( $el
.parent().hasClass( 'mw-searchSuggest-link' ) ) {
203 $el
.parent().attr( 'href', formData
.baseHref
+ $.param( formData
.linkParams
) + '&fulltext=1' );
207 .attr( 'href', formData
.baseHref
+ $.param( formData
.linkParams
) + '&fulltext=1' )
208 .addClass( 'mw-searchSuggest-link' )
213 // Generic suggestions functionality for all search boxes
214 searchboxesSelectors
= [
215 // Primary searchbox on every page in standard skins
217 // Generic selector for skins with multiple searchboxes (used by CologneBlue)
218 // and for MediaWiki itself (special pages with page title inputs)
221 $( searchboxesSelectors
.join( ', ' ) )
223 fetch: function ( query
, response
, maxRows
) {
224 var node
= this[ 0 ];
226 api
= api
|| new mw
.Api();
228 $.data( node
, 'request', mw
.searchSuggest
.request( api
, query
, response
, maxRows
) );
230 cancel: function () {
231 var node
= this[ 0 ],
232 request
= $.data( node
, 'request' );
236 $.removeData( node
, 'request' );
240 render
: renderFunction
,
241 select: function () {
242 // allow the form to be submitted
247 before
: onBeforeUpdate
,
253 .on( 'paste cut drop', function () {
254 // make sure paste and cut events from the mouse and drag&drop events
255 // trigger the keypress handler and cause the suggestions to update
256 $( this ).trigger( 'keypress' );
258 // In most skins (at least Monobook and Vector), the font-size is messed up in <body>.
259 // (they use 2 elements to get a sane font-height). So, instead of making exceptions for
260 // each skin or adding more stylesheets, just copy it from the active element so auto-fit.
262 var $this = $( this );
264 .data( 'suggestions-context' )
265 .data
.$container
.css( 'fontSize', $this.css( 'fontSize' ) );
268 // Ensure that the thing is actually present!
269 if ( $searchRegion
.length
=== 0 ) {
270 // Don't try to set anything up if simpleSearch is disabled sitewide.
271 // The loader code loads us if the option is present, even if we're
272 // not actually enabled (anymore).
276 // Special suggestions functionality and tracking for skin-provided search box
277 $searchInput
.suggestions( {
279 before
: onBeforeUpdate
,
283 render
: renderFunction
,
284 select
: selectFunction
287 render
: specialRenderFunction
,
288 select: function ( $input
, source
) {
289 var context
= $input
.data( 'suggestionsContext' ),
291 if ( source
=== 'mouse' ) {
292 // mouse click won't trigger form submission, so we need to send a click event
293 mw
.track( 'mediawiki.searchSuggest', {
294 action
: 'click-result',
295 numberOfResults
: context
.config
.suggestions
.length
,
296 index
: context
.config
.suggestions
.indexOf( text
)
299 $input
.closest( 'form' )
300 .append( $( '<input type="hidden" name="fulltext" value="1"/>' ) );
302 return true; // allow the form to be submitted
305 $region
: $searchRegion
308 $searchInput
.closest( 'form' )
309 // track the form submit event
310 .on( 'submit', function () {
311 var context
= $searchInput
.data( 'suggestionsContext' );
312 mw
.track( 'mediawiki.searchSuggest', {
313 action
: 'submit-form',
314 numberOfResults
: context
.config
.suggestions
.length
,
315 $form
: context
.config
.$region
.closest( 'form' ),
316 inputLocation
: getInputLocation( context
),
317 index
: context
.config
.suggestions
.indexOf(
318 context
.data
.$textbox
.val()
322 // If the form includes any fallback fulltext search buttons, remove them
323 .find( '.mw-fallbackSearchButton' ).remove();