AO3-4976 Fix stray semicolons in autocomplete results with ampersands (…

…#2923)

Avoid highlighting an empty search term, which can split an ampersand
entity, leaving a semicolon: "&amp<b></b>;".

features/other_a/autocomplete.feature

@@ -16,7 +16,7 @@ Feature: Display autocomplete for tags
     Given I am logged in
       And a set of tags for testing autocomplete
       And I go to the new work page
-     Then the fandom-specific tag autocomplete fields should list only fandom-specific canonical tags
+    Then the fandom-specific tag autocomplete fields should list only fandom-specific canonical tags
 
   @javascript
   Scenario: Bookmark archive work form autocomplete should work
@@ -90,3 +90,33 @@ Feature: Display autocomplete for tags
     Then a user account should not exist for "funny"
       And the pseud autocomplete should not contain "funny"
       And the pseud autocomplete should not contain "different_user (funny)"
+
+  @javascript
+  Scenario: Search terms are highlighted in autocomplete results
+    Given I am logged in
+      And basic tags
+      And a canonical relationship "Cassian Andor & Jyn Erso"
+      And I go to the new work page
+
+    When I enter "Jyn" in the "Relationships" autocomplete field
+    Then I should see HTML "Cassian Andor &amp; <b>Jyn</b> Erso" in the autocomplete
+
+    When I enter "Cass" in the "Relationships" autocomplete field
+    Then I should see HTML "<b>Cass</b>ian Andor &amp; Jyn Erso" in the autocomplete
+
+    When I enter "erso and" in the "Relationships" autocomplete field
+    Then I should see HTML "Cassian <b>And</b>or &amp; Jyn <b>Erso</b>" in the autocomplete
+
+    When I enter "Cassian Andor & Jyn Erso" in the "Relationships" autocomplete field
+    Then I should see HTML "<b>Cassian</b> <b>Andor</b> &amp; <b>Jyn</b> <b>Erso</b>" in the autocomplete
+
+    # AO3-4976 There should not be stray semicolons if the query has...
+    # ...trailing spaces
+    When I enter "Jyn " in the "Relationships" autocomplete field
+    Then I should see HTML "Cassian Andor &amp; <b>Jyn</b> Erso" in the autocomplete
+    # ...leading spaces
+    When I enter " Jyn" in the "Relationships" autocomplete field
+    Then I should see HTML "Cassian Andor &amp; <b>Jyn</b> Erso" in the autocomplete
+    # ...consecutive spaces
+    When I enter "Jyn  Erso" in the "Relationships" autocomplete field
+    Then I should see HTML "Cassian Andor &amp; <b>Jyn</b> <b>Erso</b>" in the autocomplete

features/step_definitions/autocomplete_steps.rb

@@ -15,6 +15,15 @@
   step %{a noncanonical freeform "alternate sundays"}
 end
 
+Then /^I should see HTML "(.*)?" in the autocomplete$/ do |string|
+  # There should be only one visible autocomplete dropdown.
+  within("input + .autocomplete", visible: true) do
+    # Wait for results to appear, then check their HTML content
+    expect(current_scope).to have_selector("li")
+    expect(current_scope["innerHTML"]).to include(string)
+  end
+end
+
 Then /^I should see "([^\"]+)" in the autocomplete$/ do |string|
   # There should be only one visible autocomplete dropdown.
   expect(find("input + .autocomplete", visible: true)).to have_content(string)

public/javascripts/jquery.tokeninput.js

@@ -699,6 +699,10 @@ $.TokenList = function (input, url_or_data, settings) {
     function highlight_term(value, term) {
         var newvalue = value;
         $.each(term.split(' '), function(index, termbit) {
+            if (!termbit) {
+                // AO3-4976 skip empty strings
+                return;
+            }
             termbit = termbit.replace(/([.?*+^$[\]\\(){}-])/g, "\\$1");            
             newvalue = newvalue.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + termbit + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
         });