diff --git a/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html b/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html
index 7d0c9ffb9f..513bee2808 100644
--- a/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html
@@ -41,8 +41,24 @@
     <mat-option *ngFor="let resource of filteredResources$ | async" [value]="resource">
       <span [innerHTML]="resource.title | highlight:searchText"></span>
     </mat-option>
-    <mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="searchText">
-      {{ searchText }}
-    </mat-option>
+    <ng-container *ngIf="subType !== ResourceSubType.EXTENSION; else extensionNoText">
+      <mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="null">
+        <div (click)="$event.stopPropagation()">
+          <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
+            <span>{{ 'js-func.no-js-module-text' | translate }}</span>
+          </div>
+          <ng-template #searchNotEmpty>
+          <span>
+              {{ 'js-func.no-js-module-matching' | translate: {module: searchText | truncate: true: 6: &apos;...&apos;} }}
+          </span>
+          </ng-template>
+        </div>
+      </mat-option>
+    </ng-container>
+    <ng-template #extensionNoText>
+      <mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="searchText">
+        {{ searchText }}
+      </mat-option>
+    </ng-template>
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.ts b/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.ts
index 0cf13f2052..3aab98a394 100644
--- a/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.ts
@@ -78,6 +78,8 @@ export class ResourceAutocompleteComponent implements ControlValueAccessor, OnIn
   @Input()
   subType = ResourceSubType.EXTENSION;
 
+  ResourceSubType = ResourceSubType;
+
   resourceFormGroup = this.fb.group({
     resource: this.fb.control<string|ResourceInfo>(null)
   });
@@ -210,6 +212,10 @@ export class ResourceAutocompleteComponent implements ControlValueAccessor, OnIn
     }
   }
 
+  textIsNotEmpty(text: string): boolean {
+    return (text && text.length > 0);
+  }
+
   private fetchResources(searchText?: string): Observable<Array<ResourceInfo>> {
     this.searchText = searchText;
     return this.resourceService.getResources(new PageLink(50, 0, searchText), ResourceType.JS_MODULE, this.subType, {ignoreLoading: true}).pipe(
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index c2f45da84f..362df078ab 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3332,7 +3332,9 @@
         "module-no-members": "Module has no exported members",
         "module-load-error": "Module load error",
         "source-code": "Source code",
-        "source-code-load-error": "Source code load error"
+        "source-code-load-error": "Source code load error",
+        "no-js-module-text": "No JS modules found",
+        "no-js-module-matching": "No JS modules matching '{{module}}' were found."
     },
     "key-val": {
         "key": "Key",