use the autocomplete

Gemfile

@@ -4,11 +4,5 @@ gem 'quickbooks-ruby'
 gem 'oauth2'
 gem 'roxml'
 gem 'will_paginate'
-gem 'rails-jquery-autocomplete'
-gem 'jquery-ui-rails'
 gem 'rexml'
 gem 'combine_pdf'
-
-group :assets do
-  gem 'coffee-rails'
-end

app/controllers/customers_controller.rb

@@ -30,8 +30,6 @@ class CustomersController < ApplicationController
   before_action :view_customer, except: [:new, :view]
   skip_before_action :verify_authenticity_token, :check_if_login_required, only: [:view]
 
-  autocomplete :customer, :name, full: true, extra_data: [:id]
-
   def address_to_s(address)
     return if address.nil?
 
@@ -62,6 +60,19 @@ class CustomersController < ApplicationController
     params.require(:customer).permit(:name, :email, :primary_phone, :mobile_phone, :phone_number, :notes)
   end
 
+  # Used for autocomplete form
+  def autocomplete
+    term = ActiveRecord::Base.sanitize_sql_like(params[:q].to_s)
+
+    items = Customer.where("name LIKE :t OR phone_number LIKE :t OR mobile_phone_number LIKE :t", t: "%#{term}%")
+      .order(:name)
+      .limit(20)
+
+    render json: items.map { |i|
+      { id: i.id, name: i.name, phone_number: i.phone_number, mobile_phone_number: i.mobile_phone_number }
+    }
+  end
+
   def create
     @customer = Customer.new(allowed_params)
     @customer.save

app/controllers/employees_controller.rb

@@ -7,7 +7,7 @@
 #The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 #
 #THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-class EmployeeController < ApplicationController
+class EmployeesController < ApplicationController
   include AuthHelper
 
   before_action :require_user, unless: -> { session[:token].nil? }

app/controllers/estimates_controller.rb

@@ -7,7 +7,7 @@
 #The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 #
 #THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-class EstimateController < ApplicationController
+class EstimatesController < ApplicationController
   include AuthHelper
 
   before_action :require_user, unless: -> { session[:token].nil? }

app/controllers/invoices_controller.rb

@@ -7,7 +7,7 @@
 #The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 #
 #THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-class InvoiceController < ApplicationController
+class InvoicesController < ApplicationController
   include AuthHelper
 
   before_action :require_user, unless: -> { session[:token].nil? }

app/views/customers/_search.html.erb

@@ -1,5 +1,5 @@
 <%= form_tag(customers_path, method: "get", id: "customer-search-form") do %>
-    <%= text_field_tag :search, params[:search], placeholder: t(:label_search_customers), autocomplete: "off" %>
+    <%= text_field_tag :search, params[:search], class: "customer-name", autocomplete: "off", data: { autocomplete_url: "/customers/autocomplete" } %>
     <%= submit_tag t(:label_search) %>
 <% end %>
 <%= button_to t(:label_new_customer), new_customer_path, method: :get%>

app/views/qbo/_settings.html.erb

@@ -71,9 +71,9 @@
   </div>
 
   <div style="margin-bottom: 15px;">
-    <%= link_to t(:label_sync_now_customers), customers_sync_path(full_sync: true), class: 'button icon icon-reload' %>
+    <%= link_to t(:label_sync_now_customers), sync_customers_path, class: 'button icon icon-reload' %>
     <%= link_to t(:label_sync_now_employees), employees_sync_path, class: 'button icon icon-reload' %>
-    <%= link_to t(:label_sync_now_invoices), invoices_sync_path(full_sync: true), class: 'button icon icon-reload' %>
+    <%= link_to t(:label_sync_now_invoices), invoices_sync_path, class: 'button icon icon-reload' %>
     <%= link_to t(:label_sync_now_estimate), estimates_sync_path, class: 'button icon icon-reload' %>
   </div>
 </fieldset>

assets/javascripts/autocomplete-rails.js

@@ -1 +0,0 @@
-!function(t){t.fn.railsAutocomplete=function(e){var a=function(){this.railsAutoCompleter||(this.railsAutoCompleter=new t.railsAutocomplete(this))};if(void 0!==t.fn.on){if(!e)return;return t(document).on("focus",e,a)}return this.live("focus",a)},t.railsAutocomplete=function(t){var e=t;this.init(e)},t.railsAutocomplete.options={showNoMatches:!0,noMatchesLabel:"no existing match"},t.railsAutocomplete.fn=t.railsAutocomplete.prototype={railsAutocomplete:"0.0.1"},t.railsAutocomplete.fn.extend=t.railsAutocomplete.extend=t.extend,t.railsAutocomplete.fn.extend({init:function(e){function a(t){return t.split(e.delimiter)}function i(t){return a(t).pop().replace(/^\s+/,"")}e.delimiter=t(e).attr("data-delimiter")||null,e.min_length=t(e).attr("data-min-length")||t(e).attr("min-length")||2,e.append_to=t(e).attr("data-append-to")||null,e.autoFocus=t(e).attr("data-auto-focus")||!1,t(e).autocomplete({appendTo:e.append_to,autoFocus:e.autoFocus,delay:t(e).attr("delay")||0,source:function(a,r){var n=this.element[0],o={term:i(a.term)};t(e).attr("data-autocomplete-fields")&&t.each(t.parseJSON(t(e).attr("data-autocomplete-fields")),function(e,a){o[e]=t(a).val()}),t.getJSON(t(e).attr("data-autocomplete"),o,function(){var a={};t.extend(a,t.railsAutocomplete.options),t.each(a,function(i,r){if(a.hasOwnProperty(i)){var n=t(e).attr("data-"+i);a[i]=n?n:r}}),0==arguments[0].length&&t.inArray(a.showNoMatches,[!0,"true"])>=0&&(arguments[0]=[],arguments[0][0]={id:"",label:a.noMatchesLabel}),t(arguments[0]).each(function(a,i){var r={};r[i.id]=i,t(e).data(r)}),r.apply(null,arguments),t(n).trigger("railsAutocomplete.source",arguments)})},change:function(e,a){if(t(this).is("[data-id-element]")&&""!==t(t(this).attr("data-id-element")).val()&&(t(t(this).attr("data-id-element")).val(a.item?a.item.id:"").trigger("change"),t(this).attr("data-update-elements"))){var i=t.parseJSON(t(this).attr("data-update-elements")),r=a.item?t(this).data(a.item.id.toString()):{};if(i&&""===t(i.id).val())return;for(var n in i){var o=t(i[n]);o.is(":checkbox")?null!=r[n]&&o.prop("checked",r[n]):o.val(a.item?r[n]:"").trigger("change")}}},search:function(){var t=i(this.value);return t.length<e.min_length?!1:void 0},focus:function(){return!1},select:function(i,r){if(r.item.value=r.item.value.toString(),-1!=r.item.value.toLowerCase().indexOf("no match")||-1!=r.item.value.toLowerCase().indexOf("too many results"))return t(this).trigger("railsAutocomplete.noMatch",r),!1;var n=a(this.value);if(n.pop(),n.push(r.item.value),null!=e.delimiter)n.push(""),this.value=n.join(e.delimiter);else if(this.value=n.join(""),t(this).attr("data-id-element")&&t(t(this).attr("data-id-element")).val(r.item.id).trigger("change"),t(this).attr("data-update-elements")){var o=r.item,l=-1!=r.item.value.indexOf("Create New")?!0:!1,u=t.parseJSON(t(this).attr("data-update-elements"));for(var s in u)"checkbox"===t(u[s]).attr("type")?o[s]===!0||1===o[s]?t(u[s]).attr("checked","checked"):t(u[s]).removeAttr("checked"):l&&o[s]&&-1==o[s].indexOf("Create New")||!l?t(u[s]).val(o[s]).trigger("change"):t(u[s]).val("").trigger("change")}var c=this.value;return t(this).bind("keyup.clearId",function(){t.trim(t(this).val())!=t.trim(c)&&(t(t(this).attr("data-id-element")).val("").trigger("change"),t(this).unbind("keyup.clearId"))}),t(e).trigger("railsAutocomplete.select",r),!1}}),t(e).trigger("railsAutocomplete.init")}}),t(document).ready(function(){t("input[data-autocomplete]").railsAutocomplete("input[data-autocomplete]")})}(jQuery);

assets/javascripts/autocomplete.js

@@ -0,0 +1,102 @@
+(function () {
+
+  // Helper: escape HTML for safety
+  function escapeHtml(str) {
+    return $("<div>").text(str).html();
+  }
+
+  // Helper: highlight all occurrences of term (case-insensitive)
+  function highlightTerm(text, term) {
+    if (!term) return text;
+    const escapedTerm = term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const regex = new RegExp("(" + escapedTerm + ")", "ig");
+    return text.replace(regex, "<strong>$1</strong>");
+  }
+
+  window.initCustomerAutocomplete = function(context) {
+    let scope = context || document;
+
+    $(scope).find(".customer-name").each(function() {
+      if ($(this).data("autocomplete-initialized")) return;
+      $(this).data("autocomplete-initialized", true);
+
+      let $input = $(this);
+
+      let ac = $input.autocomplete({
+        appendTo: "body",   // crucial for Redmine positioning
+        minLength: 2,
+
+        source: function(request, response) {
+          $.getJSON("/customers/autocomplete", { q: request.term })
+            .done(function(data) {
+              response(data.map(function(item) {
+                // combine secondary info
+                let secondary = [];
+                if (item.phone_number) secondary.push(item.phone_number);
+                if (item.mobile_phone_number) secondary.push(item.mobile_phone_number);
+
+                let meta = secondary.length ? " (" + secondary.join(" • ") + ")" : "";
+
+                // escape HTML to avoid XSS
+                let safeText = escapeHtml(item.name + meta);
+
+                return {
+                  label: item.name + meta,      // plain fallback
+                  value: item.name,             // goes into input
+                  id: item.id,
+                  html: highlightTerm(safeText, request.term)
+                };
+              }));
+            })
+            .fail(function() {
+              response([]);
+            });
+        },
+
+        select: function(event, ui) {
+          $input.val(ui.item.value);  // visible text
+          $("#issue_customer_id").val(ui.item.id); // hidden ID
+
+          // trigger Redmine form update safely
+          setTimeout(function() {
+            $("#issue_customer_id").trigger("change");
+          }, 0);
+
+          return false;
+        },
+
+        change: function(event, ui) {
+          // clear hidden field if no valid selection
+          if (!ui.item && !$input.val()) {
+            $("#issue_customer_id").val("");
+          }
+        }
+      });
+
+      // Render item HTML for highlight
+      ac.autocomplete("instance")._renderItem = function(ul, item) {
+        return $("<li>")
+          .append($("<div>").html(item.html))
+          .appendTo(ul);
+      };
+    });
+  };
+
+  // Re-init after Redmine AJAX form updates
+  $(document).on("ajaxComplete", function() {
+    if (window.initCustomerAutocomplete) {
+      window.initCustomerAutocomplete(document);
+    }
+  });
+
+  // Init on page load
+  $(document).ready(function() {
+    window.initCustomerAutocomplete(document);
+  });
+
+  // Also init on Turbo/Redmine load events
+  document.addEventListener("turbo:load", function() {
+    window.initCustomerAutocomplete(document);
+  });
+
+})();

assets/stylesheets/autocomplete.css

@@ -0,0 +1,5 @@
+/* Keep Redmine default look, just enhance metadata */
+.ui-autocomplete .autocomplete-meta {
+  color: #888;
+  font-size: 0.9em;
+}

config/routes.rb

@@ -14,18 +14,17 @@ get 'qbo/oauth_callback', to: 'qbo#oauth_callback'
 
 #manual sync
 get 'qbo/sync', to: 'qbo#sync'
-get 'customers/sync', to: 'customers#sync'
-get 'employees/sync', to: 'employee#sync'
-get 'invoices/sync', to: 'invoice#sync'
-get 'estimates/sync', to: 'estimate#sync'
+get 'invoices/sync', to: 'invoices#sync'
+get 'estimates/sync', to: 'estimates#sync'
+get 'employees/sync', to: 'employees#sync'
 
 #webhook
 post 'qbo/webhook', to: 'qbo#webhook'
 
 # Estimate & Invoice PDF
-get 'estimates/sync', to: 'estimate#sync'
-get 'estimates/doc/', to: 'estimate#doc', as: :estimate_doc
-get 'invoices/:id', to: 'invoice#show', as: :invoice
+get 'estimates/:id', to: 'estimates#show', as: :estimate
+get 'estimates/doc/', to: 'estimates#doc', as: :estimate_doc
+get 'invoices/:id', to: 'invoices#show', as: :invoice
 
 #manual billing
 get 'bill/:id', to: 'qbo#bill', as: :bill
@@ -39,6 +38,8 @@ get 'filter_estimates_by_customer' => 'customers#filter_estimates_by_customer'
 get 'filter_invoices_by_customer' => 'customers#filter_invoices_by_customer'
 
 resources :customers do
-  get :autocomplete_customer_name, on: :collection
-  get :sync
-end
+  collection do
+    get :autocomplete
+    get :sync
+  end
+end

init.rb

@@ -14,7 +14,7 @@ Redmine::Plugin.register :redmine_qbo do
   name 'Redmine QBO plugin'
   author 'Rick Barrette'
   description 'A pluging for Redmine to connect with QuickBooks Online to create Time Activity Entries for billable hours logged when an Issue is closed'
-  version '2026.3.11'
+  version '2026.3.12'
   url 'https://github.com/rickbarrette/redmine_qbo'
   author_url 'https://barrettefabrication.com'
   settings default: {empty: true}, partial: 'qbo/settings'

lib/redmine_qbo/hooks/issues_hook_listener.rb

@@ -23,13 +23,12 @@ module RedmineQbo
         project = context[:project]
 
         # Customer Name Text Box with database backed autocomplete
-        # onchange event will update the hidden customer_id field
-        search_customer = f.autocomplete_field :customer,
-          autocomplete_customer_name_customers_path,
-          selected: issue.customer,
-          update_elements: { 
-            id: '#issue_customer_id', 
-            value: '#issue_customer' 
+        # onchange event will update the hidden customer_id field        
+        search_customer = f.text_field :customer,
+          class: "customer-name",
+          autocomplete: "off",
+          data: {
+            autocomplete_url: "/customers/autocomplete"
           }
 
         # We need to handle 3 cases for the onchange event of the customer name field:

lib/redmine_qbo/hooks/view_hook_listener.rb

@@ -17,8 +17,9 @@ module RedmineQbo
       def view_layouts_base_html_head(context = {})
         safe_join([
           javascript_include_tag( 'application.js', plugin: :redmine_qbo),
-          javascript_include_tag( 'autocomplete-rails.js', plugin: :redmine_qbo),
-          javascript_include_tag( 'checkbox_controller.js', plugin: :redmine_qbo)
+          javascript_include_tag( 'autocomplete.js', plugin: :redmine_qbo),
+          javascript_include_tag( 'checkbox_controller.js', plugin: :redmine_qbo),
+          stylesheet_link_tag( 'autocomplete', plugin: :redmine_qbo)
         ])
       end