diff --git a/public/v1/js/ff/object-groups/create-edit.js b/public/v1/js/ff/object-groups/create-edit.js
index af75e47f4f..9a381b086a 100644
--- a/public/v1/js/ff/object-groups/create-edit.js
+++ b/public/v1/js/ff/object-groups/create-edit.js
@@ -22,31 +22,65 @@
 
 $(document).ready(function () {
     "use strict";
-
     // auto complete for object group.
     console.log('Object group auto complete thing.');
-    var objectGroupAC = new Bloodhound({
-                                           datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
-                                           queryTokenizer: Bloodhound.tokenizers.whitespace,
-                                           prefetch: {
-                                               url: 'api/v1/autocomplete/object-groups?uid=' + uid,
-                                               filter: function (list) {
-                                                   return $.map(list, function (obj) {
-                                                       return obj;
-                                                   });
-                                               }
-                                           },
-                                           remote: {
-                                               url: 'api/v1/autocomplete/object-groups?query=%QUERY&uid=' + uid,
-                                               wildcard: '%QUERY',
-                                               filter: function (list) {
-                                                   return $.map(list, function (obj) {
-                                                       return obj;
-                                                   });
-                                               }
-                                           }
-                                       });
-    objectGroupAC.initialize();
-    $('input[name="object_group"]').typeahead({hint: true, highlight: true,}, {source: objectGroupAC, displayKey: 'title', autoSelect: false});
+
+    var inputElement = document.getElementById('ffInput_object_group');
+    new BootstrapSimpleAutocomplete(inputElement, {
+        fetchFunction: function (query) {
+            // Custom data fetching logic
+            return fetch('api/v1/autocomplete/object-groups?_token=' + token + 'query=' + encodeURIComponent(query),
+                {
+                    method: 'GET',
+                    credentials: 'include',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': token
+                    },
+                }
+            )
+                .then((response) => response.json())
+                .then((data) => {
+                    var result = [];
+                    for(var i in data) {
+                        if(data.hasOwnProperty(i)) {
+                            result.push(data[i].name);
+                        }
+                    }
+                    console.log(data);
+                    console.log(result);
+                    // Process data if needed
+                    return result;
+                });
+        },
+    });
+
+
+
+
+    // var objectGroupAC = new Bloodhound({
+    //                                        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
+    //                                        queryTokenizer: Bloodhound.tokenizers.whitespace,
+    //                                        prefetch: {
+    //                                            url: 'api/v1/autocomplete/object-groups?uid=' + uid,
+    //                                            filter: function (list) {
+    //                                                return $.map(list, function (obj) {
+    //                                                    return obj;
+    //                                                });
+    //                                            }
+    //                                        },
+    //                                        remote: {
+    //                                            url: 'api/v1/autocomplete/object-groups?query=%QUERY&uid=' + uid,
+    //                                            wildcard: '%QUERY',
+    //                                            filter: function (list) {
+    //                                                return $.map(list, function (obj) {
+    //                                                    return obj;
+    //                                                });
+    //                                            }
+    //                                        }
+    //                                    });
+    // objectGroupAC.initialize();
+    // $('input[name="object_group"]').typeahead({hint: true, highlight: true,}, {source: objectGroupAC, displayKey: 'title', autoSelect: false});
 
 });
diff --git a/public/v1/js/ff/rules/create-edit.js b/public/v1/js/ff/rules/create-edit.js
index a2964e6457..7400d2c4f7 100644
--- a/public/v1/js/ff/rules/create-edit.js
+++ b/public/v1/js/ff/rules/create-edit.js
@@ -413,8 +413,9 @@ function updateTriggerInput(selectList) {
  * @param URL
  */
 function createAutoComplete(input, URL) {
-    console.log('Now in createAutoComplete("' + URL + '").');
-    input.typeahead('destroy');
+
+    //console.log('The name is ',inputResult.prop('name'));
+    var inputItem = document.getElementsByName(input.prop('name'))[0];
 
     // append URL:
     var lastChar      = URL[URL.length - 1];
@@ -422,47 +423,92 @@ function createAutoComplete(input, URL) {
     if ('&' === lastChar) {
         urlParamSplit = '';
     }
-    var source = new Bloodhound({
-                                    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
-                                    queryTokenizer: Bloodhound.tokenizers.whitespace,
-                                    prefetch: {
-                                        url: URL + urlParamSplit + 'uid=' + uid,
-                                        filter: function (list) {
-                                            return $.map(list, function (item) {
-                                                if (item.hasOwnProperty('active') && item.active === true) {
-                                                    return {name: item.name};
-                                                }
-                                                if (item.hasOwnProperty('active') && item.active === false) {
-                                                    return;
-                                                }
-                                                if (item.hasOwnProperty('active')) {
-                                                    console.log(item.active);
-                                                }
-                                                return {name: item.name};
-                                            });
-                                        }
-                                    },
-                                    remote: {
-                                        url: URL + urlParamSplit + 'query=%QUERY&uid=' + uid,
-                                        wildcard: '%QUERY',
-                                        filter: function (list) {
-                                            return $.map(list, function (item) {
-                                                if (item.hasOwnProperty('active') && item.active === true) {
-                                                    return {name: item.name};
-                                                }
-                                                if (item.hasOwnProperty('active') && item.active === false) {
-                                                    return;
-                                                }
-                                                if (item.hasOwnProperty('active')) {
-                                                    console.log(item.active);
-                                                }
-                                                return {name: item.name};
-                                            });
-                                        }
-                                    }
-                                });
-    source.initialize();
-    input.typeahead({hint: true, highlight: true,}, {source: source, displayKey: 'name', autoSelect: false});
+
+    var finalURL = URL + urlParamSplit + 'query=';
+
+    new BootstrapSimpleAutocomplete(inputItem, {
+        fetchFunction: function (query) {
+            // Custom data fetching logic
+            return fetch(finalURL + encodeURIComponent(query),
+                {
+                    method: 'GET',
+                    credentials: 'include',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': token
+                    },
+                }
+            )
+                .then((response) => response.json())
+                .then((data) => {
+                    var result = [];
+                    for(var i in data) {
+                        if(data.hasOwnProperty(i)) {
+                            result.push(data[i].name);
+                        }
+                    }
+                    console.log(data);
+                    console.log(result);
+                    // Process data if needed
+                    return result;
+                });
+        },
+    });
+    // return;
+    //
+    //
+    //
+    // console.log('Now in createAutoComplete("' + URL + '").');
+    // input.typeahead('destroy');
+    //
+    // // append URL:
+    // var lastChar      = URL[URL.length - 1];
+    // var urlParamSplit = '?';
+    // if ('&' === lastChar) {
+    //     urlParamSplit = '';
+    // }
+    // var source = new Bloodhound({
+    //                                 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+    //                                 queryTokenizer: Bloodhound.tokenizers.whitespace,
+    //                                 prefetch: {
+    //                                     url: URL + urlParamSplit + 'uid=' + uid,
+    //                                     filter: function (list) {
+    //                                         return $.map(list, function (item) {
+    //                                             if (item.hasOwnProperty('active') && item.active === true) {
+    //                                                 return {name: item.name};
+    //                                             }
+    //                                             if (item.hasOwnProperty('active') && item.active === false) {
+    //                                                 return;
+    //                                             }
+    //                                             if (item.hasOwnProperty('active')) {
+    //                                                 console.log(item.active);
+    //                                             }
+    //                                             return {name: item.name};
+    //                                         });
+    //                                     }
+    //                                 },
+    //                                 remote: {
+    //                                     url: URL + urlParamSplit + 'query=%QUERY&uid=' + uid,
+    //                                     wildcard: '%QUERY',
+    //                                     filter: function (list) {
+    //                                         return $.map(list, function (item) {
+    //                                             if (item.hasOwnProperty('active') && item.active === true) {
+    //                                                 return {name: item.name};
+    //                                             }
+    //                                             if (item.hasOwnProperty('active') && item.active === false) {
+    //                                                 return;
+    //                                             }
+    //                                             if (item.hasOwnProperty('active')) {
+    //                                                 console.log(item.active);
+    //                                             }
+    //                                             return {name: item.name};
+    //                                         });
+    //                                     }
+    //                                 }
+    //                             });
+    // source.initialize();
+    // input.typeahead({hint: true, highlight: true,}, {source: source, displayKey: 'name', autoSelect: false});
 }
 
 function testRuleTriggers() {
diff --git a/resources/views/bills/edit.blade.php b/resources/views/bills/edit.blade.php
index 9d0c0ed1ee..fa91a5e53d 100644
--- a/resources/views/bills/edit.blade.php
+++ b/resources/views/bills/edit.blade.php
@@ -84,6 +84,10 @@
     <script type="text/javascript" src="v1/js/lib/jquery-ui.min.js?v={{ $FF_BUILD_TIME }}" nonce="{{ $JS_NONCE }}"></script>
     <script type="text/javascript" src="v1/js/ff/accounts/edit.js?v={{ $FF_BUILD_TIME }}" nonce="{{ $JS_NONCE }}"></script>
 
+    {{-- new auto complete for object groups --}}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-simple-autocomplete.js?v={{ $FF_BUILD_TIME }}"
+            nonce="{{ $JS_NONCE }}"></script>
+
     {{-- auto complete for object groups --}}
     <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ $FF_BUILD_TIME }}"
             nonce="{{ $JS_NONCE }}"></script>
diff --git a/resources/views/rules/rule/edit.blade.php b/resources/views/rules/rule/edit.blade.php
index 4dbcd71b5f..d26162d3a2 100644
--- a/resources/views/rules/rule/edit.blade.php
+++ b/resources/views/rules/rule/edit.blade.php
@@ -128,8 +128,11 @@
 @endsection
 @section('scripts')
     @vite(['js/pages/generic.js'])
-    <script type="text/javascript" src="v1/js/lib/typeahead/typeahead.bundle.min.js?v={{ $FF_BUILD_TIME }}"
+
+    {{-- new auto complete --}}
+    <script type="text/javascript" src="v1/js/lib/bootstrap-simple-autocomplete.js?v={{ $FF_BUILD_TIME }}"
             nonce="{{ $JS_NONCE }}"></script>
+
     <script type="text/javascript" nonce="{{ $JS_NONCE }}">
         var triggerCount = {{ $triggerCount }};
         var actionCount = {{ $actionCount }};