Include matched prefix as part of the display options. (#8209)

Author: isoos

pkg/web_app/lib/src/widget/completion/suggest.dart

@@ -109,10 +109,15 @@ class Suggestion {
   final suggestions = completion.options.map((option) {
     final overlap = _lcs(prefix, option);
     var html = option;
+    // highlight the overlapping part of the text
     if (overlap.isNotEmpty) {
       html = html.replaceAll(
           overlap, '<span class="completion-overlap">$overlap</span>');
     }
+    // include matched prefix as part of the display option
+    if (completion.terminal) {
+      html = '$match$html';
+    }
     final score = (option.startsWith(word) ? math.pow(overlap.length, 3) : 0) +
         math.pow(overlap.length, 2) +
         (option.startsWith(overlap) ? overlap.length : 0) +

pkg/web_app/test/widget/completion/suggest_test.dart

@@ -68,50 +68,50 @@ void main() {
           'start': 0,
           'end': 5,
           'value': 'is:flutter-favorite ',
-          'html': 'flu<span class="completion-overlap">tt</span>er-favorite',
+          'html': 'is:flu<span class="completion-overlap">tt</span>er-favorite',
           'score': 4.125,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:unlisted ',
-          'html': 'unlis<span class="completion-overlap">t</span>ed',
+          'html': 'is:unlis<span class="completion-overlap">t</span>ed',
           'score': 1.125,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:dart3-compatible ',
           'html':
-              'dar<span class="completion-overlap">t</span>3-compa<span class="completion-overlap">t</span>ible',
+              'is:dar<span class="completion-overlap">t</span>3-compa<span class="completion-overlap">t</span>ible',
           'score': 1.0625,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:legacy ',
-          'html': 'legacy',
+          'html': 'is:legacy',
           'score': 0.0,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:null-safe ',
-          'html': 'null-safe',
+          'html': 'is:null-safe',
           'score': 0.0,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:plugin ',
-          'html': 'plugin',
+          'html': 'is:plugin',
           'score': 0.0
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:wasm-ready ',
-          'html': 'wasm-ready',
+          'html': 'is:wasm-ready',
           'score': 0.0,
         },
       ]);