fix: fire onSearchComplete before onSelect when auto-selecting (#870)

When a search returns a single suggestion whose value exactly matches
the current query and `triggerSelectOnValidInput` is true (the default),
`suggest()` calls `select(0)` which fires `onSelect`. Previously, the
three response paths (function lookup, cached/local, ajax) all fired
`onSearchComplete` after `suggest()`, so consumers received the events
in the wrong order — onSelect before onSearchComplete — making any
cleanup logic in onSearchComplete clobber state set during onSelect.

Move `onSearchComplete` ahead of `suggest()` (and `processResponse()`
on the ajax path, which contains `suggest()`) so the events fire in
the natural order: search-complete, then any resulting select.

Closes #852.

Co-authored-by: Tomas Kirda <tomas.kirda@bisoncommerce.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

dist/jquery.autocomplete.esm.js

@@ -400,8 +400,8 @@ var _Autocomplete = class _Autocomplete {
     if (typeof options.lookup === "function") {
       options.lookup(q, (data) => {
         this.suggestions = data.suggestions;
-        this.suggest();
         options.onSearchComplete.call(this.element, q, data.suggestions);
+        this.suggest();
       });
       return;
     }
@@ -416,8 +416,8 @@ var _Autocomplete = class _Autocomplete {
     }
     if (response && Array.isArray(response.suggestions)) {
       this.suggestions = response.suggestions;
-      this.suggest();
       options.onSearchComplete.call(this.element, q, response.suggestions);
+      this.suggest();
     } else if (!this.isBadQuery(q)) {
       this.abortAjax();
       const ajaxSettings = {
@@ -430,8 +430,8 @@ var _Autocomplete = class _Autocomplete {
       this.currentRequest = $.ajax(ajaxSettings).done((data) => {
         this.currentRequest = null;
         const result = options.transformResult(data, q);
-        this.processResponse(result, q, cacheKey);
         options.onSearchComplete.call(this.element, q, result.suggestions);
+        this.processResponse(result, q, cacheKey);
       }).fail((jqXHR, textStatus, errorThrown) => {
         options.onSearchError.call(this.element, q, jqXHR, textStatus, errorThrown);
       });

dist/jquery.autocomplete.js

@@ -408,8 +408,8 @@
       if (typeof options.lookup === "function") {
         options.lookup(q, (data) => {
           this.suggestions = data.suggestions;
-          this.suggest();
           options.onSearchComplete.call(this.element, q, data.suggestions);
+          this.suggest();
         });
         return;
       }
@@ -424,8 +424,8 @@
       }
       if (response && Array.isArray(response.suggestions)) {
         this.suggestions = response.suggestions;
-        this.suggest();
         options.onSearchComplete.call(this.element, q, response.suggestions);
+        this.suggest();
       } else if (!this.isBadQuery(q)) {
         this.abortAjax();
         const ajaxSettings = {
@@ -438,8 +438,8 @@
         this.currentRequest = $2.ajax(ajaxSettings).done((data) => {
           this.currentRequest = null;
           const result = options.transformResult(data, q);
-          this.processResponse(result, q, cacheKey);
           options.onSearchComplete.call(this.element, q, result.suggestions);
+          this.processResponse(result, q, cacheKey);
         }).fail((jqXHR, textStatus, errorThrown) => {
           options.onSearchError.call(this.element, q, jqXHR, textStatus, errorThrown);
         });

dist/jquery.autocomplete.min.js

@@ -416,8 +416,10 @@ export class Autocomplete {
         if (typeof options.lookup === "function") {
             (options.lookup as LookupCallback)(q, (data) => {
                 this.suggestions = data.suggestions;
-                this.suggest();
+                // Fire onSearchComplete before suggest() so consumers see
+                // "search complete" before any auto-select fires onSelect.
                 options.onSearchComplete.call(this.element, q, data.suggestions);
+                this.suggest();
             });
             return;
         }
@@ -434,8 +436,8 @@ export class Autocomplete {
 
         if (response && Array.isArray(response.suggestions)) {
             this.suggestions = response.suggestions;
-            this.suggest();
             options.onSearchComplete.call(this.element, q, response.suggestions);
+            this.suggest();
         } else if (!this.isBadQuery(q)) {
             this.abortAjax();
 
@@ -451,8 +453,8 @@ export class Autocomplete {
                 .done((data) => {
                     this.currentRequest = null;
                     const result = options.transformResult(data, q);
-                    this.processResponse(result, q, cacheKey!);
                     options.onSearchComplete.call(this.element, q, result.suggestions);
+                    this.processResponse(result, q, cacheKey!);
                 })
                 .fail((jqXHR, textStatus, errorThrown) => {
                     options.onSearchError.call(this.element, q, jqXHR, textStatus, errorThrown);

src/Autocomplete.ts

@@ -708,6 +708,27 @@ describe("Autocomplete", () => {
     });
 });
 
+describe("Autocomplete event ordering", () => {
+    afterEach(() => {
+        $(".autocomplete-suggestions").remove();
+    });
+
+    it("fires onSearchComplete before onSelect when a single match auto-selects", () => {
+        const input = document.createElement("input");
+        const calls = [];
+        const autocomplete = new $.Autocomplete(input, {
+            lookup: [{ value: "Apple", data: 1 }],
+            onSearchComplete: () => calls.push("searchComplete"),
+            onSelect: () => calls.push("select"),
+        });
+
+        input.value = "Apple";
+        autocomplete.onValueChange();
+
+        expect(calls).toEqual(["searchComplete", "select"]);
+    });
+});
+
 describe("Autocomplete groupBy", () => {
     afterEach(() => {
         $(".autocomplete-suggestions").remove();