WIP

src/layouts/insurance-company/insurance-company.vue

@@ -109,17 +109,75 @@ export default {
     },
     computed: {
         insuranceCompanyListTags() {
-            return this.insuranceCompanyList.map((item) => {
+            // return this.insuranceCompanyList.map((item) => {
-                return item.accountName;
+            //     return item.accountName;
+            // });
+
+            const termMap = [
+                {
+                    term: "1st",
+                    altTerm: "FIRST",
+                }
+            ];
+
+            const doTest = (testTerm) => {
+                return termMap.find((matchingTerm) => {
+                    if (testTerm.includes(matchingTerm.term)) return matchingTerm.altTerm;
+                    return;
                 });
+            };
+
+
+            return this.insuranceCompanyList.map((item) => {
+                // return item.accountName;
+                return {
+                    label: item.accountName,
+                    altTerms: doTest(item.accountName) ? doTest(item.accountName) : "",
+                }
+            });
+
+
+
+
+            // return [
+            //             {
+            //                 "label": "1ST INSURANCE",
+            //                 "altTerms": "FIRST"
+            //             },
+            //             {
+            //                 "label": "AAA INSURANCE",
+            //                 "altTerms": "AMERICAN AUTOMOTIVE AUTOMOBILE ASSOCIATION TRIPLE"
+            //             },
+            //             {
+            //                 "label": "AMERICAN ROADS INSURANCE",
+            //                 "altTerms": ""
+            //             },
+            //             {
+            //                 "label": "DONT USE US INSURANCE",
+            //                 "altTerms": ""
+            //             },
+            //             {
+            //                 "label": "FIRST PIONEER INSURANCE",
+            //                 "altTerms": "1ST"
+            //             },
+            // ];
         },
     },
     methods: {
         arePagePrerequisitesValid() {
             return store.getters.vehicle.carId !== null;
         },
-        handleAutocompleteSelect(value) {
+        findMatches(request, response) {
-            this.selectedQuery = value;
+            const matches = [];
+            const term = request?.term?.toUpperCase();
+            console.log(this.insuranceCompanyListTags);
+            this.insuranceCompanyListTags.forEach((tag, index) => {
+                if (tag.label.indexOf(term) !== -1 || tag.altTerms.indexOf(term) !== -1) {
+                    matches.push(tag);
+                }
+            });
+
+            response(matches);
         },
         backButtonAction() {
             // Go back to Quote page
@@ -131,30 +189,25 @@ export default {
         },
     },
     mounted() {
-        const select = this.handleAutocompleteSelect;
+        setTimeout(() => {
-
             $("#autocomplete").autocomplete({
-            source: this.insuranceCompanyListTags,
+                source: this.findMatches,
                 position: {
                     my: "left top+6",
                 },
                 minLength: 0, // Necessary to display menu when clearing input
+
                 // Bold matching letters as you type in the input
                 search: function (event, ui) {
                     setTimeout(() => {
-                    let w = $(this).autocomplete("widget").find("div"),
+                        let w = $(this).autocomplete("widget").find("div");
-                        re = new RegExp("(" + this.value + ")", "i");
+                        let regExpString = "(" + this.value + ")";
-                    w.html((i, html) => html.replace(re, "<span>$1</span>"));
+                        let re = new RegExp(regExpString, "i");
+                        w.html((i, html) => html.replace(re, "<span style='color: red'>$1</span>"));
                     }, 5);
                 },
             });
-    },
+        }, 5);
-    watch: {
-        selectedQuery(newValue, oldValue) {
-            if (oldValue.length > 0 && newValue.length === 0) {
-                $("#autocomplete").autocomplete("search", "");
-            }
-        },
     },
     components: {
         funnelHeader,
@@ -176,6 +229,8 @@ ul {
         background: $white;
         border: 1px solid $gray;
         border-radius: 0.25rem;
+        height: 50%;
+        overflow: auto;
         li {
             &:hover,
             .ui-state-active {