Bug 1146782: backport bug 1159589 to bmo (migrate autocomplete from yui to jquery)

30 files changed, 194 insertions, 219 deletions

diff --git a/extensions/BMO/template/en/default/bug/create/create-automative.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-automative.html.tmpl
index 62d37e227..c19bed29b 100644
--- a/extensions/BMO/template/en/default/bug/create/create-automative.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-automative.html.tmpl
@@ -87,7 +87,7 @@ function validateAndSubmit() {
    javascript = inline_javascript
    javascript_urls = [ 'extensions/BMO/web/js/form_validate.js',
                        'js/field.js', 'js/util.js' ]
-   yui = [ "autocomplete", "calendar", "selector" ]
+   yui = [ "calendar", "selector" ]
 %]
 
 [% USE Bugzilla %]
diff --git a/extensions/BMO/template/en/default/bug/create/create-creative.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-creative.html.tmpl
index 1e18b71de..17ce19ccf 100644
--- a/extensions/BMO/template/en/default/bug/create/create-creative.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-creative.html.tmpl
@@ -116,7 +116,7 @@ function toggleTypeOther(element) {
    javascript = inline_javascript
    javascript_urls = [ 'extensions/BMO/web/js/form_validate.js',
                        'js/field.js', 'js/util.js' ]
-   yui = [ "autocomplete", "calendar" ]
+   yui = [ "calendar" ]
 %]
 
 [% USE Bugzilla %]
diff --git a/extensions/BMO/template/en/default/bug/create/create-doc.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-doc.html.tmpl
index 00ea21c0f..c7f883fb4 100644
--- a/extensions/BMO/template/en/default/bug/create/create-doc.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-doc.html.tmpl
@@ -40,7 +40,7 @@ function validateAndSubmit() {
    javascript = inline_javascript
    javascript_urls = [ 'extensions/BMO/web/js/form_validate.js',
                        'js/field.js', 'js/util.js', 'js/bug.js' ]
-   yui = [ 'autocomplete', 'datatable', 'button' ]
+   yui = [ 'datatable', 'button' ]
 %]
 
 [% USE Bugzilla %]
diff --git a/extensions/BMO/template/en/default/bug/create/create-finance.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-finance.html.tmpl
index d7734f042..8b2fd63da 100644
--- a/extensions/BMO/template/en/default/bug/create/create-finance.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-finance.html.tmpl
@@ -9,7 +9,7 @@
 [% PROCESS global/variables.none.tmpl %]
 
 [% inline_style = BLOCK %]
-  #bug_form input[type=text], #bug_form input[type=file], #cc_autocomplete, #bug_form textarea {
+  #bug_form input[type=text], #bug_form input[type=file], #bug_form textarea {
     width: 100%;
   }
 [% END %]
diff --git a/extensions/BMO/template/en/default/bug/create/create-fxos-preload-app.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-fxos-preload-app.html.tmpl
index 105dc13ac..c51c5c91d 100644
--- a/extensions/BMO/template/en/default/bug/create/create-fxos-preload-app.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-fxos-preload-app.html.tmpl
@@ -87,7 +87,7 @@ function validateAndSubmit() {
    javascript = inline_javascript
    javascript_urls = [ 'extensions/BMO/web/js/form_validate.js',
                        'js/field.js', 'js/util.js' ]
-   yui = [ "autocomplete", "calendar", "selector" ]
+   yui = [ "calendar", "selector" ]
 %]
 
 [% USE Bugzilla %]
diff --git a/extensions/BMO/template/en/default/bug/create/create-itrequest.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-itrequest.html.tmpl
index ead28cd03..2a81b45bd 100644
--- a/extensions/BMO/template/en/default/bug/create/create-itrequest.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-itrequest.html.tmpl
@@ -84,7 +84,6 @@
    generate_api_token = 1
    javascript = inline_javascript
    javascript_urls = [ 'js/field.js' ]
-   yui = [ 'autocomplete' ]
 %]
 
 [% USE Bugzilla %]
diff --git a/extensions/BMO/template/en/default/bug/create/create-legal.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-legal.html.tmpl
index 1b950475c..56ae2b7fc 100644
--- a/extensions/BMO/template/en/default/bug/create/create-legal.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-legal.html.tmpl
@@ -26,7 +26,6 @@
    generate_api_token = 1
    style_urls = [ 'skins/standard/attachment.css' ]
    javascript_urls = [ 'js/attachment.js', 'js/field.js' ]
-   yui = [ 'autocomplete' ]
 %]
 
 [% IF user.in_group("mozilla-employee-confidential")
diff --git a/extensions/BMO/template/en/default/bug/create/create-mozlist.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-mozlist.html.tmpl
index 078c82272..0fbce708b 100644
--- a/extensions/BMO/template/en/default/bug/create/create-mozlist.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-mozlist.html.tmpl
@@ -13,7 +13,6 @@
    generate_api_token = 1
    javascript_urls = [ 'extensions/BMO/web/js/form_validate.js',
                        'js/field.js' ]
-   yui = [ 'autocomplete' ]
    style = ".mandatory{color:red;font-size:80%;}"
 %]
 
diff --git a/extensions/BMO/template/en/default/bug/create/create-mozpr.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-mozpr.html.tmpl
index 91921b43e..c62d8b99f 100644
--- a/extensions/BMO/template/en/default/bug/create/create-mozpr.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-mozpr.html.tmpl
@@ -274,7 +274,7 @@ function validate_form() {
    javascript = inline_javascript
    javascript_urls = [ 'extensions/BMO/web/js/form_validate.js',
                        'js/field.js', 'js/util.js' ]
-   yui = [ "autocomplete", "calendar" ]
+   yui = [ "calendar" ]
 %]
 
 [% UNLESS user.in_group('pr-private') %]
diff --git a/extensions/BMO/template/en/default/bug/create/create-recruiting.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-recruiting.html.tmpl
index 23b791d24..621bed533 100644
--- a/extensions/BMO/template/en/default/bug/create/create-recruiting.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-recruiting.html.tmpl
@@ -64,7 +64,6 @@ function jobDescToggle(what) {
    javascript_urls    = [ 'js/attachment.js', 'js/field.js' ]
    style              = inline_style
    javascript         = inline_javascript
-   yui                = [ 'autocomplete' ]
 %]
 
 [% IF user.in_group("mozilla-employee-confidential")
diff --git a/extensions/BMO/template/en/default/bug/create/create-swag.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-swag.html.tmpl
index 8d2b14881..06e12c3d3 100644
--- a/extensions/BMO/template/en/default/bug/create/create-swag.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-swag.html.tmpl
@@ -587,7 +587,7 @@ function showGear() {
    javascript = inline_javascript
    javascript_urls = [ 'extensions/BMO/web/js/form_validate.js',
                        'js/field.js', 'js/util.js' ]
-   yui = [ 'autocomplete', 'calendar' ]
+   yui = [ 'calendar' ]
 %]
 
 <h1>Mozilla Gear</h1>
diff --git a/extensions/BMO/template/en/default/bug/create/create-user-engagement.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-user-engagement.html.tmpl
index a6d5b8e1f..23ea0bb86 100644
--- a/extensions/BMO/template/en/default/bug/create/create-user-engagement.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-user-engagement.html.tmpl
@@ -81,7 +81,7 @@ function toggleGoalOther() {
    javascript = inline_javascript
    javascript_urls = [ 'extensions/BMO/web/js/form_validate.js',
                        'js/field.js', 'js/util.js' ]
-   yui = [ "autocomplete", "calendar" ]
+   yui = [ "calendar" ]
 %]
 
 [% USE Bugzilla %]
diff --git a/extensions/BMO/template/en/default/bug/create/create-webops-request.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-webops-request.html.tmpl
index 54a09c2de..03325469f 100644
--- a/extensions/BMO/template/en/default/bug/create/create-webops-request.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-webops-request.html.tmpl
@@ -71,7 +71,7 @@ function validateAndSubmit() {
    javascript = inline_javascript
    javascript_urls = [ 'extensions/BMO/web/js/form_validate.js',
                        'js/field.js', 'js/util.js' ]
-   yui = [ "autocomplete", "selector" ]
+   yui = [ "selector" ]
 %]
 
 [% USE Bugzilla %]
diff --git a/extensions/BMO/template/en/default/global/prod-comp-search.html.tmpl b/extensions/BMO/template/en/default/global/prod-comp-search.html.tmpl
deleted file mode 100644
index 2f1d67bec..000000000
--- a/extensions/BMO/template/en/default/global/prod-comp-search.html.tmpl
+++ /dev/null
@@ -1,43 +0,0 @@
-[%# This Source Code Form is subject to the terms of the Mozilla Public
-  # License, v. 2.0. If a copy of the MPL was not distributed with this
-  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-  #
-  # This Source Code Form is "Incompatible With Secondary Licenses", as
-  # defined by the Mozilla Public License, v. 2.0.
-  #%]
-
-<div id="prod_comp_search_main">
-  <div id="prod_comp_search_autocomplete">
-    <div id="prod_comp_search_label">
-      Type to find product and component by name or description:
-      <img id="prod_comp_throbber" src="extensions/BMO/web/images/throbber.gif"
-           class="hidden" width="16" height="11">
-    </div>
-    <input id="prod_comp_search" type="text" size="60">
-    <div id="prod_comp_search_autocomplete_container"></div>
-  </div>
-</div>
-<script type="text/javascript">
-  if(typeof(YAHOO.bugzilla.prodCompSearch) !== 'undefined' 
-     && YAHOO.bugzilla.prodCompSearch != null) 
-  {
-    YAHOO.bugzilla.prodCompSearch.init(
-      "prod_comp_search",
-      "prod_comp_search_autocomplete_container",
-      "[% format FILTER js %]",
-      "[% cloned_bug_id FILTER js %]");
-    [% IF target == "describecomponents.cgi" %]
-      YAHOO.bugzilla.prodCompSearch.autoComplete.itemSelectEvent.subscribe(function (e, args) {
-        var oData = args[2];
-        var url = "describecomponents.cgi?product=" + encodeURIComponent(oData[0]) +
-                  "&component=" +  encodeURIComponent(oData[1]) + 
-                  "#" + encodeURIComponent(oData[1]);
-        var format = YAHOO.bugzilla.prodCompSearch.format;
-        if (format) {
-          url += "&format=" + encodeURIComponent(format);
-        }
-        window.location.href = url;
-      });
-    [% END %]
-  }
-</script>
diff --git a/extensions/BMO/template/en/default/pages/group_membership.html.tmpl b/extensions/BMO/template/en/default/pages/group_membership.html.tmpl
index 9218d44ed..a98354eac 100644
--- a/extensions/BMO/template/en/default/pages/group_membership.html.tmpl
+++ b/extensions/BMO/template/en/default/pages/group_membership.html.tmpl
@@ -9,7 +9,6 @@
 [% PROCESS global/header.html.tmpl
   title = "Group Membership Report"
   generate_api_token = 1
-  yui = [ 'autocomplete' ]
   style_urls = [ "extensions/BMO/web/styles/reports.css" ]
   javascript_urls = [ "js/field.js" ]
 %]
diff --git a/extensions/BMO/template/en/default/pages/triage_reports.html.tmpl b/extensions/BMO/template/en/default/pages/triage_reports.html.tmpl
index a8cc85509..b0ca7e30d 100644
--- a/extensions/BMO/template/en/default/pages/triage_reports.html.tmpl
+++ b/extensions/BMO/template/en/default/pages/triage_reports.html.tmpl
@@ -41,7 +41,7 @@ var selected_components = [
 [% INCLUDE global/header.html.tmpl
   title = "Triage Reports"
   generate_api_token = 1
-  yui = [ 'autocomplete', 'calendar' ]
+  yui = [ 'calendar' ]
   javascript = js_data
   javascript_urls = [ "js/util.js", "js/field.js", "js/productform.js",
                       "extensions/BMO/web/js/triage_reports.js" ]
diff --git a/extensions/BMO/template/en/default/pages/user_activity.html.tmpl b/extensions/BMO/template/en/default/pages/user_activity.html.tmpl
index 2ba463247..ad79b3c4d 100644
--- a/extensions/BMO/template/en/default/pages/user_activity.html.tmpl
+++ b/extensions/BMO/template/en/default/pages/user_activity.html.tmpl
@@ -15,7 +15,7 @@
 [% INCLUDE global/header.html.tmpl
   title = "User Activity Report" _ who_title
   generate_api_token = 1
-  yui = [ 'autocomplete', 'calendar' ]
+  yui = [ 'calendar' ]
   javascript_urls = [ "js/util.js", "js/field.js" ]
   style_urls = [ "extensions/BMO/web/styles/reports.css" ]
 
diff --git a/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl
index 1fc00e82f..13ec7d567 100644
--- a/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl
@@ -37,9 +37,8 @@
     jquery = [];
   END;
 
-  # right now we need yui for the user fields
+  # right now we need yui for tracking flags and needinfo extensions
   no_yui = 0;
-  yui = ['autocomplete'];
 
   # add body classes for sec-groups, etc
   FOREACH group IN bug.groups_in;
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index 3060d4fd6..e69bcaa2a 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -309,6 +309,10 @@ input[type="number"] {
     float: right;
 }
 
+#add-cc {
+    width: 100%;
+}
+
 /* actions */
 
 #top-actions {
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index b0b5f5317..66e214ad6 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -324,32 +324,24 @@ $(function() {
                     });
 
                     // keywords is a multi-value autocomplete
-                    // (this should probably be a simple jquery plugin)
                     keywords = data.keywords;
                     $('#keywords')
-                        .bind('keydown', function(event) {
-                            if (event.keyCode == $.ui.keyCode.TAB && $(this).autocomplete('instance').menu.active)
-                            {
-                                event.preventDefault();
-                            }
-                        })
-                        .blur(function() {
-                            $(this).val($(this).val().replace(/,\s*$/, ''));
-                        })
-                        .autocomplete({
-                            source: function(request, response) {
-                                response($.ui.autocomplete.filter(keywords, request.term.split(/,\s*/).pop()));
-                            },
-                            focus: function() {
-                                return false;
+                        .devbridgeAutocomplete({
+                            lookup: keywords,
+                            tabDisabled: true,
+                            delimiter: /,\s*/,
+                            minChars: 0,
+                            autoSelectFirst: true,
+                            formatResult: function(suggestion, currentValue) {
+                                // disable <b> wrapping of matched substring
+                                return suggestion.value
+                                    .replace(/&/g, '&amp;')
+                                    .replace(/</g, '&lt;')
+                                    .replace(/>/g, '&gt;')
+                                    .replace(/"/g, '&quot;');
                             },
-                            select: function(event, ui) {
-                                var terms = this.value.split(/,\s*/);
-                                terms.pop();
-                                terms.push(ui.item.value);
-                                terms.push('');
-                                this.value = terms.join(', ');
-                                return false;
+                            onSelect: function() {
+                                this.focus();
                             }
                         });
 
@@ -886,27 +878,20 @@ $(function() {
             $('#product-search').show();
         });
     $('#pcs')
-        .on('autocompleteselect', function(event, ui) {
-            $('#product-search-error').hide();
-            $('.pcs-form').hide();
-            $('#product-search-cancel').hide();
-            $('#product-search').show();
-            if ($('#product').val() != ui.item.product) {
-                $('#component').data('preselect', ui.item.component);
-                $('#product').val(ui.item.product).change();
-            }
-            else {
-                $('#component').val(ui.item.component);
-            }
-            $('#product').show();
-        })
-        .autocomplete('option', 'autoFocus', true)
-        .keydown(function(event) {
-            if (event.which == 13) {
-                event.preventDefault();
-                var enterKeyEvent = $.Event("keydown");
-                enterKeyEvent.keyCode = $.ui.keyCode.ENTER;
-                $('#pcs').trigger(enterKeyEvent);
+        .devbridgeAutocomplete('setOptions', {
+            onSelect: function(suggestion) {
+                $('#product-search-error').hide();
+                $('.pcs-form').hide();
+                $('#product-search-cancel').hide();
+                $('#product-search').show();
+                if ($('#product').val() != suggestion.data.product) {
+                    $('#component').data('preselect', suggestion.data.component);
+                    $('#product').val(suggestion.data.product).change();
+                }
+                else {
+                    $('#component').val(suggestion.data.component);
+                }
+                $('#product').show();
             }
         });
     $(document)
diff --git a/extensions/GuidedBugEntry/template/en/default/guided/guided.html.tmpl b/extensions/GuidedBugEntry/template/en/default/guided/guided.html.tmpl
index 47614a636..007ae5ce7 100644
--- a/extensions/GuidedBugEntry/template/en/default/guided/guided.html.tmpl
+++ b/extensions/GuidedBugEntry/template/en/default/guided/guided.html.tmpl
@@ -20,7 +20,7 @@
    javascript_urls = js_urls
    style_urls = [ 'extensions/GuidedBugEntry/web/style/guided.css',
                   'js/yui/assets/skins/sam/container.css' ]
-   yui = [ 'history', 'datatable', 'container', 'autocomplete' ]
+   yui = [ 'history', 'datatable', 'container' ]
 %]
 
 <iframe id="yui-history-iframe" src="extensions/GuidedBugEntry/web/yui-history-iframe.txt"></iframe>
diff --git a/extensions/MozProjectReview/template/en/default/bug/create/create-moz-project-review.html.tmpl b/extensions/MozProjectReview/template/en/default/bug/create/create-moz-project-review.html.tmpl
index 593faa142..9c679dfa1 100644
--- a/extensions/MozProjectReview/template/en/default/bug/create/create-moz-project-review.html.tmpl
+++ b/extensions/MozProjectReview/template/en/default/bug/create/create-moz-project-review.html.tmpl
@@ -14,7 +14,7 @@
    style_urls = [ 'extensions/MozProjectReview/web/style/moz_project_review.css' ]
    javascript_urls = [ 'js/field.js', 'js/util.js',
                        'extensions/MozProjectReview/web/js/moz_project_review.js' ]
-   yui = [ 'autocomplete', 'calendar' ]
+   yui = [ 'calendar' ]
 %]
 
 <p>
diff --git a/extensions/ProdCompSearch/lib/WebService.pm b/extensions/ProdCompSearch/lib/WebService.pm
index a28b5d059..521d1588f 100644
--- a/extensions/ProdCompSearch/lib/WebService.pm
+++ b/extensions/ProdCompSearch/lib/WebService.pm
@@ -113,7 +113,7 @@ sub prod_comp_search {
         unshift @order, "products.name != 'bugzilla.mozilla.org'";
     }
 
-    my $products = $dbh->selectall_arrayref("
+    my $components = $dbh->selectall_arrayref("
         SELECT products.name AS product,
                components.name AS component
           FROM products
@@ -124,6 +124,15 @@ sub prod_comp_search {
       ORDER BY " . join(", ", @order) . " $limit",
         { Slice => {} });
 
+    my $products = [];
+    my $current_product;
+    foreach my $component (@$components) {
+        if (!$current_product || $component->{product} ne $current_product) {
+            $current_product = $component->{product};
+            push @$products, { product => $current_product };
+        }
+        push @$products, $component;
+    }
     return { products => $products };
 }
 
diff --git a/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl b/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl
index 39919510c..c232f677d 100644
--- a/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl
+++ b/extensions/ProdCompSearch/template/en/default/prodcompsearch/form.html.tmpl
@@ -35,10 +35,10 @@
     <img id="[% id FILTER html %]-throbber"
       src="extensions/ProdCompSearch/web/images/throbber.gif"
       style="display:none" width="16" height="11">
-    <span class="pcs-message" id="[% id FILTER html %]-no_components" style="display:none">
+    <span class="pcs-message" id="[% id FILTER html %]-no_results" style="display:none">
       No components found
     </span>
-    <span class="pcs-message" id="[% id FILTER html %]-too_many_components" style="display:none">
+    <span class="pcs-message" id="[% id FILTER html %]-too_many_results" style="display:none">
       Result limited to [% max_results FILTER html %] components
     </span>
     <span class="pcs-message" id="[% id FILTER html %]-error" style="display:none">
diff --git a/extensions/ProdCompSearch/web/js/prod_comp_search.js b/extensions/ProdCompSearch/web/js/prod_comp_search.js
index 2c9516967..69cc7cc0b 100644
--- a/extensions/ProdCompSearch/web/js/prod_comp_search.js
+++ b/extensions/ProdCompSearch/web/js/prod_comp_search.js
@@ -9,112 +9,142 @@
 
 $(function() {
     'use strict';
-    $('.prod_comp_search').autocomplete({
-        minLength: 3,
-        delay: 500,
-        source: function(request, response) {
-            var el = this.element;
-            $(document).trigger('pcs:search', [ el ]);
-            var id = '#' + el.prop('id');
-            var throbber = $('#' + $(el).data('throbber'));
-            throbber.show();
-            $(id + '-no_components').hide();
-            $(id + '-too_many_components').hide();
-            $(id + '-error').hide();
-            var url = 'rest/prod_comp_search/' + encodeURIComponent(request.term) +
-                     '?limit=' + (el.data('max_results') + 1);
-            if (BUGZILLA.api_token) {
-                url += '&Bugzilla_api_token=' + encodeURIComponent(BUGZILLA.api_token);
-            }
-            $.ajax({
-                url: url,
-                contentType: 'application/json'
-            })
-            .done(function(data) {
-                throbber.hide();
-                if (data.error) {
-                    $(id + '-error').show();
-                    console.log(data.message);
-                    return false;
-                }
-                if (data.products.length === 0) {
-                    $(id + '-no_results').show();
-                    $(document).trigger('pcs:no_results', [ el ]);
-                }
-                else if (data.products.length > el.data('max_results')) {
-                    $(id + '-too_many_results').show();
-                    $(document).trigger('pcs:too_many_results', [ el ]);
-                }
-                else {
-                    $(document).trigger('pcs:results', [ el, data ]);
-                }
-                var current_product = "";
-                var prod_comp_array = [];
-                var base_params = [];
-                if (el.data('format')) {
-                    base_params.push('format=' + encodeURIComponent(el.data('format')));
-                }
-                if (el.data('cloned_bug_id')) {
-                    base_params.push('cloned_bug_id=' + encodeURIComponent(el.data('cloned_bug_id')));
-                }
-                $.each(data.products, function() {
-                    var params = base_params.slice();
-                    params.push('product=' + encodeURIComponent(this.product));
-                    if (this.product != current_product) {
-                        prod_comp_array.push({
-                            label:   this.product,
-                            product: this.product,
-                            url:     el.data('script_name') + '?' + params.join('&')
-                        });
-                        current_product = this.product;
+
+    function hideNotifications(target) {
+        var id = '#' + $(target).prop('id');
+        var that = $(id);
+        if (that.data('counter') === 0)
+            that.removeClass('autocomplete-running');
+        $(id + '-no_results').hide();
+        $(id + '-too_many_results').hide();
+        $(id + '-error').hide();
+    }
+
+    function searchComplete(query, suggestions) {
+        var that = $(this);
+        var id = '#' + that.prop('id');
+
+        that.data('counter', that.data('counter') - 1);
+        hideNotifications(this);
+        if (document.activeElement != this)
+            that.devbridgeAutocomplete('hide');
+        if (that.data('error')) {
+            searchError.call(that[0], null, null, null, that.data('error'));
+            that.data('error', '');
+        }
+
+        if (suggestions.length === 0) {
+            $(id + '-no_results').show();
+            $(document).trigger('pcs:no_results', [ that ]);
+        }
+        else if (suggestions.length > that.data('max_results')) {
+            $(id + '-too_many_results').show();
+            $(document).trigger('pcs:too_many_results', [ that ]);
+        }
+        else {
+            $(document).trigger('pcs:results', [ that, suggestions ]);
+        }
+    }
+
+    function searchError(q, jqXHR, textStatus, errorThrown) {
+        var that = $(this);
+        that.data('counter', that.data('counter') - 1);
+        hideNotifications(this);
+        if (errorThrown !== 'abort') {
+            $('#' + that.attr('id') + '-error').show();
+            console.log(errorThrown);
+        }
+    }
+
+    $('.prod_comp_search')
+        .each(function() {
+            var that = $(this);
+            that.devbridgeAutocomplete({
+                serviceUrl: function(query) {
+                    return 'rest/prod_comp_search/' + encodeURIComponent(query);
+                },
+                params: {
+                    Bugzilla_api_token: (BUGZILLA.api_token ? BUGZILLA.api_token : ''),
+                    limit: (that.data('max_results') + 1)
+                },
+                deferRequestBy: 250,
+                minChars: 3,
+                maxHeight: 500,
+                tabDisabled: true,
+                autoSelectFirst: true,
+                triggerSelectOnValidInput: false,
+                width: '',
+                transformResult: function(response) {
+                    response = $.parseJSON(response);
+                    if (response.error) {
+                        that.data('error', response.message);
+                        return { suggestions: [] };
                     }
-                    params.push('component=' + encodeURIComponent(this.component));
-                    var url = el.data('script_name') + '?' + params.join('&');
-                    if (el.data('anchor_component')) {
-                        url += "#" + encodeURIComponent(this.component);
+                    return {
+                        suggestions: $.map(response.products, function(dataItem) {
+                            if (dataItem.component) {
+                                return {
+                                    value: dataItem.product + ' :: ' + dataItem.component,
+                                    data : dataItem
+                                };
+                            }
+                            else {
+                                return {
+                                    value: dataItem.product,
+                                    data : dataItem
+                                };
+                            }
+                        })
+                    };
+                },
+                formatResult: function(suggestion, currentValue) {
+                    var value = (suggestion.data.component ? suggestion.data.component : suggestion.data.product);
+                    var escaped = value
+                        .replace(/&/g, '&amp;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;')
+                        .replace(/"/g, '&quot;');
+                    if (suggestion.data.component) {
+                        return '-&nbsp;' + escaped;
                     }
-                    prod_comp_array.push({
-                        label:     this.product + ' :: ' + this.component,
-                        product:   this.product,
-                        component: this.component,
-                        url:       url
-                    });
-                });
-                response(prod_comp_array);
-            })
-            .fail(function(xhr, error_text) {
-                if (xhr.responseJSON && xhr.responseJSON.error) {
-                    error_text = xhr.responseJSON.message;
+                    else {
+                        return '<b>' + escaped + '</b>';
+                    }
+                    return suggestion.data.component ? '-&nbsp;' + escaped : escaped;
+                },
+                beforeRender: function(container) {
+                    container.css('min-width', that.outerWidth() - 2 + 'px');
+                },
+                onSearchStart: function(params) {
+                    var that = $(this);
+                    params.match = $.trim(params.match);
+                    that.addClass('autocomplete-running');
+                    that.data('counter', that.data('counter') + 1);
+                    that.data('error', '');
+                    hideNotifications(this);
+                },
+                onSearchComplete: searchComplete,
+                onSearchError: searchError,
+                onSelect: function(suggestion) {
+                    var that = $(this);
+                    if (that.data('ignore-select'))
+                        return;
+
+                    var params = [];
+                    if (that.data('format'))
+                        params.push('format=' + encodeURIComponent(that.data('format')));
+                    if (that.data('cloned_bug_id'))
+                        params.push('cloned_bug_id=' + encodeURIComponent(that.data('cloned_bug_id')));
+                    params.push('product=' + encodeURIComponent(suggestion.data.product));
+                    if (suggestion.data.component)
+                        params.push('component=' + encodeURIComponent(suggestion.data.component));
+
+                    var url = that.data('script_name') + '?' + params.join('&');
+                    if (that.data('anchor_component') && suggestion.data.component)
+                        url += "#" + encodeURIComponent(suggestion.data.component);
+                    document.location.href = url;
                 }
-                throbber.hide();
-                $(id + '-comp_error').show();
-                $(document).trigger('pcs:error', [ el, error_text ]);
-                console.log(error_text);
             });
-        },
-        focus: function(event, ui) {
-            event.preventDefault();
-        },
-        select: function(event, ui) {
-            event.preventDefault();
-            var el = $(this);
-            el.val(ui.item.label);
-            if (el.data('ignore-select')) {
-                return;
-            }
-            if (el.data('new_tab')) {
-                window.open(ui.item.url, '_blank');
-            }
-            else {
-                window.location.href = ui.item.url;
-            }
-        }
-    })
-    .focus(function(event) {
-        var el = $(event.target);
-        if (el.val().length >= el.autocomplete('option', 'minLength')) {
-            el.autocomplete('search');
-        }
-    });
-    $('.prod_comp_search:focus').select();
+        })
+        .data('counter', 0);
 });
diff --git a/extensions/REMO/template/en/default/bug/create/create-mozreps.html.tmpl b/extensions/REMO/template/en/default/bug/create/create-mozreps.html.tmpl
index 6a5794121..286beefaa 100644
--- a/extensions/REMO/template/en/default/bug/create/create-mozreps.html.tmpl
+++ b/extensions/REMO/template/en/default/bug/create/create-mozreps.html.tmpl
@@ -23,7 +23,6 @@
    title              = "Mozilla Reps - Application Form"
    generate_api_token = 1
    style_urls         = [ "extensions/REMO/web/styles/moz_reps.css" ]
-   yui                = [ "autocomplete" ]
    jquery             = []
    javascript_urls    = [ "extensions/REMO/web/js/moz_reps.js", "js/field.js", "js/util.js"]
 %]
diff --git a/extensions/REMO/template/en/default/bug/create/create-remo-budget.html.tmpl b/extensions/REMO/template/en/default/bug/create/create-remo-budget.html.tmpl
index 5f5291d32..873ca9503 100644
--- a/extensions/REMO/template/en/default/bug/create/create-remo-budget.html.tmpl
+++ b/extensions/REMO/template/en/default/bug/create/create-remo-budget.html.tmpl
@@ -15,7 +15,7 @@
    javascript_urls = [ 'extensions/REMO/web/js/form_validate.js',
                        'js/util.js',
                        'js/field.js' ]
-  yui = [ 'autocomplete', 'calendar' ]
+  yui = [ 'calendar' ]
 %]
 
 [% IF user.in_group("mozilla-reps") %]
diff --git a/extensions/Review/template/en/default/pages/review_history.html.tmpl b/extensions/Review/template/en/default/pages/review_history.html.tmpl
index 98acf4cb8..107f69f70 100644
--- a/extensions/Review/template/en/default/pages/review_history.html.tmpl
+++ b/extensions/Review/template/en/default/pages/review_history.html.tmpl
@@ -17,7 +17,6 @@
             'extensions/Review/web/js/moment.min.js',
             'js/util.js',
             'js/field.js' ]
-  yui = [ "autocomplete" ]
 %]
 
 <script type="text/javascript">
diff --git a/extensions/Splinter/template/en/default/pages/splinter.html.tmpl b/extensions/Splinter/template/en/default/pages/splinter.html.tmpl
index bfb6e2fcb..14034a184 100644
--- a/extensions/Splinter/template/en/default/pages/splinter.html.tmpl
+++ b/extensions/Splinter/template/en/default/pages/splinter.html.tmpl
@@ -41,7 +41,6 @@
                       "extensions/Splinter/web/splinter.js",
                       "js/field.js" ]
   bodyclasses = bodyclasses
-  yui = ['autocomplete']
 %]
 
 [% can_edit = 0 %]
diff --git a/extensions/UserProfile/template/en/default/pages/user_profile.html.tmpl b/extensions/UserProfile/template/en/default/pages/user_profile.html.tmpl
index 617ee1f2b..9cbf80c8a 100644
--- a/extensions/UserProfile/template/en/default/pages/user_profile.html.tmpl
+++ b/extensions/UserProfile/template/en/default/pages/user_profile.html.tmpl
@@ -17,7 +17,6 @@
    title = "User Profile: $filtered_identity"
    generate_api_token = 1
    style_urls = [ "extensions/UserProfile/web/styles/user_profile.css" ]
-   yui = [ 'autocomplete' ]
    javascript_urls = [ "js/field.js" ]
 %]