diff --git a/package-lock.json b/package-lock.json
index 645a523..1352430 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "theme-aurora",
+    "name": "obms-theme-aurora",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
@@ -11,6 +11,7 @@
                 "datatables.net": "^1.11.3",
                 "datatables.net-bs4": "^2.2.2",
                 "datatables.net-dt": "^1.11.3",
+                "jquery-ui": "^1.14.1",
                 "js-cookie": "^3.0.5",
                 "vue": "^2.6.14"
             },
@@ -9069,6 +9070,14 @@
             "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
             "license": "MIT"
         },
+        "node_modules/jquery-ui": {
+            "version": "1.14.1",
+            "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.14.1.tgz",
+            "integrity": "sha512-DhzsYH8VeIvOaxwi+B/2BCsFFT5EGjShdzOcm5DssWjtcpGWIMsn66rJciDA6jBruzNiLf1q0KvwMoX1uGNvnQ==",
+            "dependencies": {
+                "jquery": ">=1.12.0 <5.0.0"
+            }
+        },
         "node_modules/js-beautify": {
             "version": "1.15.4",
             "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.4.tgz",
diff --git a/package.json b/package.json
index df78598..18a34f7 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
         "datatables.net": "^1.11.3",
         "datatables.net-bs4": "^2.2.2",
         "datatables.net-dt": "^1.11.3",
+        "jquery-ui": "^1.14.1",
         "js-cookie": "^3.0.5",
         "vue": "^2.6.14"
     }
diff --git a/src/admin/contract/details.blade.php b/src/admin/contract/details.blade.php
index 6fd118d..8669c07 100644
--- a/src/admin/contract/details.blade.php
+++ b/src/admin/contract/details.blade.php
@@ -546,7 +546,7 @@
                                 <label for="user_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.user_id') }}</label>
 
                                 <div class="col-md-8">
-                                    <input id="user_id" type="number" class="form-control " name="user_id" value="{{ $contract->user_id }}">
+                                    <input id="user_id" type="text" class="form-control " name="user_id" value="{{ $contract->user_id }}" data-autocomplete="user_id">
 
                                     @error('user_id')
                                     <span class="invalid-feedback" role="alert">
@@ -795,6 +795,10 @@
                 ],
                 order: [[0, 'desc']],
             });
+
+            $('[data-autocomplete="user_id"]').autocomplete({
+                source: '/admin/customers/search',
+            });
         });
     </script>
 @endsection
diff --git a/src/admin/contract/home.blade.php b/src/admin/contract/home.blade.php
index b27e65b..f1a6bed 100644
--- a/src/admin/contract/home.blade.php
+++ b/src/admin/contract/home.blade.php
@@ -52,7 +52,7 @@
                             <label for="user_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.user_id') }}</label>
 
                             <div class="col-md-8">
-                                <input id="user_id" type="number" class="form-control @error('user_id') is-invalid @enderror" name="user_id" value="{{ old('user_id') }}">
+                                <input id="user_id" type="text" class="form-control @error('user_id') is-invalid @enderror" name="user_id" value="{{ old('user_id') }}" data-autocomplete="user_id">
 
                                 @error('user_id')
                                 <span class="invalid-feedback" role="alert">
@@ -108,6 +108,10 @@
                 ],
                 order: [[0, 'desc']]
             });
+
+            $('[data-autocomplete="user_id"]').autocomplete({
+                source: '/admin/customers/search',
+            });
         });
     </script>
 @endsection
diff --git a/src/admin/customer/details.blade.php b/src/admin/customer/details.blade.php
index 91ef2f4..0e59ca6 100644
--- a/src/admin/customer/details.blade.php
+++ b/src/admin/customer/details.blade.php
@@ -1312,7 +1312,7 @@
                             <label for="contract_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.contract_id') }}</label>
 
                             <div class="col-md-8">
-                                <input id="contract_id" type="number" class="form-control @error('contract_id') is-invalid @enderror" name="contract_id" value="{{ old('contract_id') }}">
+                                <input id="contract_id" type="text" class="form-control @error('contract_id') is-invalid @enderror" name="contract_id" value="{{ old('contract_id') }}" data-autocomplete="contract_id">
 
                                 @error('contract_id')
                                 <span class="invalid-feedback" role="alert">
@@ -1348,7 +1348,7 @@
                             <label for="contract_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.contract_id') }}</label>
 
                             <div class="col-md-8">
-                                <input id="contract_id" type="number" class="form-control @error('contract_id') is-invalid @enderror" name="contract_id" value="{{ old('contract_id') }}">
+                                <input id="contract_id" type="text" class="form-control @error('contract_id') is-invalid @enderror" name="contract_id" value="{{ old('contract_id') }}" data-autocomplete="contract_id">
 
                                 @error('contract_id')
                                 <span class="invalid-feedback" role="alert">
@@ -1361,7 +1361,7 @@
                             <label for="invoice_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.invoice_id') }}</label>
 
                             <div class="col-md-8">
-                                <input id="invoice_id" type="number" class="form-control @error('invoice_id') is-invalid @enderror" name="invoice_id" value="{{ old('invoice_id') }}">
+                                <input id="invoice_id" type="text" class="form-control @error('invoice_id') is-invalid @enderror" name="invoice_id" value="{{ old('invoice_id') }}" data-autocomplete="invoice_id">
 
                                 @error('invoice_id')
                                 <span class="invalid-feedback" role="alert">
@@ -1561,6 +1561,14 @@ function initTableOptionRemovalClickListener(table) {
                     });
                 }
             });
+
+            $('[data-autocomplete="contract_id"]').autocomplete({
+                source: '/admin/contracts/search?user_id={{ $user->id }}',
+            });
+
+            $('[data-autocomplete="invoice_id"]').autocomplete({
+                source: '/admin/invoices/customers/search?user_id={{ $user->id }}',
+            });
         });
     </script>
 @endsection
diff --git a/src/admin/invoice/customer/details.blade.php b/src/admin/invoice/customer/details.blade.php
index 4bce9e7..f8b44f2 100644
--- a/src/admin/invoice/customer/details.blade.php
+++ b/src/admin/invoice/customer/details.blade.php
@@ -551,7 +551,7 @@
                                 <label for="user_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.user_id') }}</label>
 
                                 <div class="col-md-8">
-                                    <input id="user_id" type="number" class="form-control " name="user_id" value="{{ $invoice->user_id }}">
+                                    <input id="user_id" type="text" class="form-control " name="user_id" value="{{ $invoice->user_id }}" data-autocomplete="user_id">
 
                                     @error('user_id')
                                     <span class="invalid-feedback" role="alert">
@@ -581,7 +581,7 @@
                                 <label for="contract_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.contract_id') }}</label>
 
                                 <div class="col-md-8">
-                                    <input id="contract_id" type="number" class="form-control " name="contract_id" value="{{ $invoice->contract_id }}">
+                                    <input id="contract_id" type="text" class="form-control " name="contract_id" value="{{ $invoice->contract_id }}" data-autocomplete="contract_id">
 
                                     @error('contract_id')
                                     <span class="invalid-feedback" role="alert">
@@ -793,6 +793,14 @@
                 ],
                 order: [[0, 'desc']],
             });
+
+            $('[data-autocomplete="user_id"]').autocomplete({
+                source: '/admin/customers/search',
+            });
+
+            $('[data-autocomplete="contract_id"]').autocomplete({
+                source: '/admin/contracts/search',
+            });
         });
     </script>
 @endsection
diff --git a/src/admin/invoice/customer/home.blade.php b/src/admin/invoice/customer/home.blade.php
index 19ca6cf..2aaeac6 100644
--- a/src/admin/invoice/customer/home.blade.php
+++ b/src/admin/invoice/customer/home.blade.php
@@ -54,7 +54,7 @@
                             <label for="user_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.user_id') }}</label>
 
                             <div class="col-md-8">
-                                <input id="user_id" type="number" class="form-control @error('user_id') is-invalid @enderror" name="user_id" value="{{ old('user_id') }}">
+                                <input id="user_id" type="text" class="form-control @error('user_id') is-invalid @enderror" name="user_id" value="{{ old('user_id') }}" data-autocomplete="user_id">
 
                                 @error('user_id')
                                 <span class="invalid-feedback" role="alert">
@@ -86,7 +86,7 @@
                             <label for="contract_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.contract_id') }}</label>
 
                             <div class="col-md-8">
-                                <input id="contract_id" type="number" class="form-control @error('contract_id') is-invalid @enderror" name="contract_id" value="{{ old('contract_id') }}">
+                                <input id="contract_id" type="text" class="form-control @error('contract_id') is-invalid @enderror" name="contract_id" value="{{ old('contract_id') }}" data-autocomplete="contract_id">
 
                                 @error('contract_id')
                                 <span class="invalid-feedback" role="alert">
@@ -126,6 +126,14 @@
                 ],
                 order: [[0, 'desc']]
             });
+
+            $('[data-autocomplete="user_id"]').autocomplete({
+                source: '/admin/customers/search',
+            });
+
+            $('[data-autocomplete="contract_id"]').autocomplete({
+                source: '/admin/contracts/search',
+            });
         });
     </script>
 @endsection
diff --git a/src/admin/invoice/supplier/details.blade.php b/src/admin/invoice/supplier/details.blade.php
index bfa54aa..2a10f98 100644
--- a/src/admin/invoice/supplier/details.blade.php
+++ b/src/admin/invoice/supplier/details.blade.php
@@ -519,7 +519,7 @@
                                 <label for="user_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.user_id') }}</label>
 
                                 <div class="col-md-8">
-                                    <input id="user_id" type="number" class="form-control " name="user_id" value="{{ $invoice->user_id }}">
+                                    <input id="user_id" type="text" class="form-control " name="user_id" value="{{ $invoice->user_id }}" data-autocomplete="user_id">
 
                                     @error('user_id')
                                     <span class="invalid-feedback" role="alert">
@@ -800,6 +800,10 @@
                 ],
                 order: [[0, 'desc']],
             });
+
+            $('[data-autocomplete="user_id"]').autocomplete({
+                source: '/admin/suppliers/search',
+            });
         });
     </script>
 @endsection
diff --git a/src/admin/invoice/supplier/home.blade.php b/src/admin/invoice/supplier/home.blade.php
index 84c5d37..330e0b2 100644
--- a/src/admin/invoice/supplier/home.blade.php
+++ b/src/admin/invoice/supplier/home.blade.php
@@ -68,7 +68,7 @@
                             <label for="user_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.user_id') }}</label>
 
                             <div class="col-md-8">
-                                <input id="user_id" type="number" class="form-control @error('user_id') is-invalid @enderror" name="user_id" value="{{ old('user_id') }}">
+                                <input id="user_id" type="text" class="form-control @error('user_id') is-invalid @enderror" name="user_id" value="{{ old('user_id') }}" data-autocomplete="user_id">
 
                                 @error('user_id')
                                 <span class="invalid-feedback" role="alert">
@@ -157,6 +157,10 @@
                 ],
                 order: [[0, 'desc']]
             });
+
+            $('[data-autocomplete="user_id"]').autocomplete({
+                source: '/admin/suppliers/search',
+            });
         });
     </script>
 @endsection
diff --git a/src/admin/supplier/details.blade.php b/src/admin/supplier/details.blade.php
index 565aadb..9b5d6ef 100644
--- a/src/admin/supplier/details.blade.php
+++ b/src/admin/supplier/details.blade.php
@@ -1163,24 +1163,11 @@
                     @csrf
                     <input id="user_id" type="hidden" name="user_id" value="{{ $user->id }}">
                     <div class="modal-body">
-                        <div class="form-group row">
-                            <label for="contract_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.contract_id') }}</label>
-
-                            <div class="col-md-8">
-                                <input id="contract_id" type="number" class="form-control @error('contract_id') is-invalid @enderror" name="contract_id" value="{{ old('contract_id') }}">
-
-                                @error('contract_id')
-                                <span class="invalid-feedback" role="alert">
-                                    <strong>{{ $message }}</strong>
-                                </span>
-                                @enderror
-                            </div>
-                        </div>
                         <div class="form-group row">
                             <label for="invoice_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.invoice_id') }}</label>
 
                             <div class="col-md-8">
-                                <input id="invoice_id" type="number" class="form-control @error('invoice_id') is-invalid @enderror" name="invoice_id" value="{{ old('invoice_id') }}">
+                                <input id="invoice_id" type="text" class="form-control @error('invoice_id') is-invalid @enderror" name="invoice_id" value="{{ old('invoice_id') }}" data-autocomplete="invoice_id">
 
                                 @error('invoice_id')
                                 <span class="invalid-feedback" role="alert">
@@ -1327,6 +1314,10 @@ function initTableOptionRemovalClickListener(table) {
                     $(this).parent().parent().remove();
                 });
             }
+
+            $('[data-autocomplete="invoice_id"]').autocomplete({
+                source: '/admin/invoices/suppliers/search?user_id={{ $user->id }}',
+            });
         });
     </script>
 @endsection
diff --git a/src/admin/tenants/home.blade.php b/src/admin/tenants/home.blade.php
index a8974cb..b303413 100644
--- a/src/admin/tenants/home.blade.php
+++ b/src/admin/tenants/home.blade.php
@@ -66,7 +66,7 @@
                             <label for="user_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.user_id') }}</label>
 
                             <div class="col-md-8">
-                                <input id="user_id" type="number" class="form-control @error('user_id') is-invalid @enderror" name="user_id" value="{{ old('user_id') }}">
+                                <input id="user_id" type="text" class="form-control @error('user_id') is-invalid @enderror" name="user_id" value="{{ old('user_id') }}" data-autocomplete="user_id">
 
                                 @error('user_id')
                                 <span class="invalid-feedback" role="alert">
@@ -80,7 +80,7 @@
                             <label for="contract_id" class="col-md-4 col-form-label text-md-right">{{ __('interface.data.contract_id') }}</label>
 
                             <div class="col-md-8">
-                                <input id="contract_id" type="number" class="form-control @error('contract_id') is-invalid @enderror" name="contract_id" value="{{ old('contract_id') }}">
+                                <input id="contract_id" type="text" class="form-control @error('contract_id') is-invalid @enderror" name="contract_id" value="{{ old('contract_id') }}" data-autocomplete="contract_id">
 
                                 @error('contract_id')
                                 <span class="invalid-feedback" role="alert">
@@ -118,6 +118,14 @@
                 ],
                 order: [[0, 'desc']]
             });
+
+            $('[data-autocomplete="user_id"]').autocomplete({
+                source: '/admin/customers/search',
+            });
+
+            $('[data-autocomplete="contract_id"]').autocomplete({
+                source: '/admin/contracts/search',
+            });
         });
     </script>
 @endsection
diff --git a/src/js/app.js b/src/js/app.js
index 26fc75a..f6467cd 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -6,6 +6,9 @@
 require('./bootstrap');
 
 window.$  = require('jquery');
+
+require('jquery-ui/ui/widgets/autocomplete');
+
 window.dt = require('datatables.net');
 window.Vue = require('vue').default;
 window.Cookies = require('js-cookie');
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 6728dfc..60d079f 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -15,6 +15,9 @@ $bootstrap-icons-font-dir: "/themes/aurora/fonts/vendor/bootstrap-icons";
 @import 'datatables.net-dt/css/jquery.dataTables.min';
 @import 'datatables.net-bs4/css/dataTables.bootstrap4.min';
 
+// jQuery UI
+@import "jquery-ui/themes/base/all.css";
+
 // Base style
 @import 'base';
 @import 'frame';
@@ -762,3 +765,41 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 ::-webkit-scrollbar-thumb:hover {
     background: var(--secondary);
 }
+
+.ui-autocomplete {
+    position: absolute;
+    z-index: 10000;
+    display: block;
+    background-color: $dropdown-bg;
+    border: $dropdown-border-width solid $dropdown-border-color;
+    border-radius: $dropdown-border-radius;
+    box-shadow: $dropdown-box-shadow;
+    max-height: 300px;
+    overflow-y: auto;
+    padding: $dropdown-padding-y 0;
+}
+
+.ui-autocomplete .ui-menu-item {
+    cursor: pointer;
+    list-style: none;
+}
+
+.ui-autocomplete .ui-menu-item-wrapper {
+    display: block;
+    width: 100%;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+    clear: both;
+    font-weight: $font-weight-normal;
+    color: $dropdown-link-color;
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+}
+
+.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
+.ui-autocomplete .ui-menu-item-wrapper:hover {
+    color: $dropdown-link-hover-color;
+    text-decoration: none;
+    background-color: $dropdown-link-hover-bg;
+}