jquery.suggestions: Only highlight prefix matches

* jquery.highlightText: Add an option to highlight a prefix only.
* jquery.suggestions: Use the new option.

Bug: T27187
Change-Id: I097f012d2022334bbdb8cb32b256ae978aec57c7

diff --git a/RELEASE-NOTES-1.29 b/RELEASE-NOTES-1.29
index c04c8f7..c92b522 100644 (file)
--- a/RELEASE-NOTES-1.29
+++ b/RELEASE-NOTES-1.29
@@ -65,6 +65,8 @@ production.
 === Bug fixes in 1.29 ===
 * (T62604) Core parser functions returning a number now format the number according
   to the page content language, not wiki content language.
+* (T27187) Search suggestions based on jquery.suggestions will now correctly only
+  highlight prefix matches in the results.
 
 === Action API changes in 1.29 ===
 * Submitting sensitive authentication request parameters to action=clientlogin,

diff --git a/resources/src/jquery/jquery.highlightText.js b/resources/src/jquery/jquery.highlightText.js
index 3feca81..a6b9373 100644 (file)
--- a/resources/src/jquery/jquery.highlightText.js
+++ b/resources/src/jquery/jquery.highlightText.js
@@ -8,18 +8,28 @@
        $.highlightText = {
 
                // Split our pattern string at spaces and run our highlight function on the results
-               splitAndHighlight: function ( node, pat ) {
+               splitAndHighlight: function ( node, text ) {
                        var i,
-                               patArray = pat.split( ' ' );
-                       for ( i = 0; i < patArray.length; i++ ) {
-                               if ( patArray[ i ].length === 0 ) {
+                               words = text.split( ' ' );
+                       for ( i = 0; i < words.length; i++ ) {
+                               if ( words[ i ].length === 0 ) {
                                        continue;
                                }
-                               $.highlightText.innerHighlight( node, patArray[ i ] );
+                               $.highlightText.innerHighlight(
+                                       node,
+                                       new RegExp( '(^|\\s)' + mw.RegExp.escape( words[ i ] ), 'i' )
+                               );
                        }
                        return node;
                },
 
+               prefixHighlight: function ( node, prefix ) {
+                       $.highlightText.innerHighlight(
+                               node,
+                               new RegExp( '(^)' + mw.RegExp.escape( prefix ), 'i' )
+                       );
+               },
+
                // scans a node looking for the pattern and wraps a span around each match
                innerHighlight: function ( node, pat ) {
                        var i, match, pos, spannode, middlebit, middleclone;
@@ -28,7 +38,7 @@
                                // non latin characters can make regex think a new word has begun: do not use \b
                                // http://stackoverflow.com/questions/3787072/regex-wordwrap-with-utf8-characters-in-js
                                // look for an occurrence of our pattern and store the starting position
-                               match = node.data.match( new RegExp( '(^|\\s)' + mw.RegExp.escape( pat ), 'i' ) );
+                               match = node.data.match( pat );
                                if ( match ) {
                                        pos = match.index + match[ 1 ].length; // include length of any matched spaces
                                        // create the span wrapper for the matched text
@@ -37,7 +47,7 @@
                                        // shave off the characters preceding the matched text
                                        middlebit = node.splitText( pos );
                                        // shave off any unmatched text off the end
-                                       middlebit.splitText( pat.length );
+                                       middlebit.splitText( match[ 0 ].length - match[ 1 ].length );
                                        // clone for appending to our span
                                        middleclone = middlebit.cloneNode( true );
                                        // append the matched text node to the span
@@ -63,11 +73,23 @@
                }
        };
 
-       $.fn.highlightText = function ( matchString ) {
+       /**
+        * Highlight certain text in current nodes (by wrapping it in `<span class="highlight">...</span>`).
+        *
+        * @param {string} matchString String to match
+        * @param {Object} [options]
+        * @param {string} [options.method='splitAndHighlight'] Method of matching to use, one of:
+        *   - 'splitAndHighlight': Split `matchString` on spaces, then match each word separately.
+        *   - 'prefixHighlight': Match `matchString` at the beginning of text only.
+        * @return {[type]} [description]
+        */
+       $.fn.highlightText = function ( matchString, options ) {
+               options = options || {};
+               options.method = options.method || 'splitAndHighlight';
                return this.each( function () {
                        var $el = $( this );
                        $el.data( 'highlightText', { originalText: $el.text() } );
-                       $.highlightText.splitAndHighlight( this, matchString );
+                       $.highlightText[ options.method ]( this, matchString );
                } );
        };
 

diff --git a/resources/src/jquery/jquery.suggestions.js b/resources/src/jquery/jquery.suggestions.js
index f3e4e09..8c1739c 100644 (file)
--- a/resources/src/jquery/jquery.suggestions.js
+++ b/resources/src/jquery/jquery.suggestions.js
@@ -375,7 +375,7 @@
                                                                }
 
                                                                if ( context.config.highlightInput ) {
-                                                                       $result.highlightText( context.data.prevText );
+                                                                       $result.highlightText( context.data.prevText, { method: 'prefixHighlight' } );
                                                                }
 
                                                                // Widen results box if needed (new width is only calculated here, applied later).