From 8bc2c630e57ff71debbcec517f4e0c4bb69c0bf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 9 Jan 2023 17:41:49 +0300
Subject: [PATCH] Fixed #2525 - empty slot for Autocomplete

---
 api-generator/components/autocomplete.js  | 8 ++++++--
 components/autocomplete/AutoComplete.d.ts | 4 ++++
 components/autocomplete/AutoComplete.vue  | 5 ++++-
 pages/autocomplete/AutoCompleteDoc.vue    | 8 ++++++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/api-generator/components/autocomplete.js b/api-generator/components/autocomplete.js
index bc2468e29..f745c56f2 100644
--- a/api-generator/components/autocomplete.js
+++ b/api-generator/components/autocomplete.js
@@ -387,11 +387,15 @@ const AutoCompleteSlots = [
     },
     {
         name: 'content',
-        description: 'Custom content for the virtual scroller'
+        description: 'Custom content for the virtual scroller.'
     },
     {
         name: 'loader',
-        description: 'Custom content for the virtual scroller loader items'
+        description: 'Custom content for the virtual scroller loader items.'
+    },
+    {
+        name: 'empty',
+        description: 'Custom empty template when there is no data to display.'
     }
 ];
 
diff --git a/components/autocomplete/AutoComplete.d.ts b/components/autocomplete/AutoComplete.d.ts
index 02546022f..f1c608040 100755
--- a/components/autocomplete/AutoComplete.d.ts
+++ b/components/autocomplete/AutoComplete.d.ts
@@ -381,6 +381,10 @@ export interface AutoCompleteSlots {
          */
         options: any[];
     }) => VNode[];
+    /**
+     * Custom empty template when there is no data to display.
+     */
+    empty: () => VNode[];
 }
 
 export declare type AutoCompleteEmits = {
diff --git a/components/autocomplete/AutoComplete.vue b/components/autocomplete/AutoComplete.vue
index 8b648b225..a3ff29818 100755
--- a/components/autocomplete/AutoComplete.vue
+++ b/components/autocomplete/AutoComplete.vue
@@ -119,6 +119,9 @@
                                         <!--TODO: Deprecated since v3.16.0-->
                                     </li>
                                 </template>
+                                <li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option">
+                                    <slot name="empty">{{ searchResultMessageText }}</slot>
+                                </li>
                             </ul>
                         </template>
                         <template v-if="$slots.loader" v-slot:loader="{ options }">
@@ -323,7 +326,7 @@ export default {
     watch: {
         suggestions() {
             if (this.searching) {
-                ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : this.hide();
+                ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : !!this.$slots.empty ? this.show() : this.hide();
                 this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
                 this.searching = false;
             }
diff --git a/pages/autocomplete/AutoCompleteDoc.vue b/pages/autocomplete/AutoCompleteDoc.vue
index 7faf69f9f..f5040e542 100755
--- a/pages/autocomplete/AutoCompleteDoc.vue
+++ b/pages/autocomplete/AutoCompleteDoc.vue
@@ -562,6 +562,10 @@ export default {
                         <td>loader</td>
                         <td>options: Options of the loader items for virtualscroller</td>
                     </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
@@ -605,6 +609,10 @@ export default {
                         <td>p-autocomplete-token-label</td>
                         <td>Label of a selected item in multiple mode.</td>
                     </tr>
+                    <tr>
+                        <td>p-autocomplete-empty-message</td>
+                        <td>Container element when there is no suggestion to display.</td>
+                    </tr>
                     <tr>
                         <td>p-overlay-open</td>
                         <td>Container element when overlay is visible.</td>