From 0403ad22d81671c478b074241c9f727758cd1bfd Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 11 Mar 2024 15:14:02 -0400
Subject: [PATCH] WIP

---
 .../insurance-company/insurance-company.vue   | 107 +++++++++++++-----
 1 file changed, 81 insertions(+), 26 deletions(-)

diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue
index da649eb3a..1b0ee15ab 100644
--- a/src/layouts/insurance-company/insurance-company.vue
+++ b/src/layouts/insurance-company/insurance-company.vue
@@ -109,17 +109,75 @@ export default {
     },
     computed: {
         insuranceCompanyListTags() {
+            // return this.insuranceCompanyList.map((item) => {
+            //     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 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) {
-            this.selectedQuery = value;
+        findMatches(request, response) {
+            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.findMatches,
+                position: {
+                    my: "left top+6",
+                },
+                minLength: 0, // Necessary to display menu when clearing input
 
-        $("#autocomplete").autocomplete({
-            source: this.insuranceCompanyListTags,
-            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"),
-                        re = new RegExp("(" + this.value + ")", "i");
-                    w.html((i, html) => html.replace(re, "<span>$1</span>"));
-                }, 5);
-            },
-        });
-    },
-    watch: {
-        selectedQuery(newValue, oldValue) {
-            if (oldValue.length > 0 && newValue.length === 0) {
-                $("#autocomplete").autocomplete("search", "");
-            }
-        },
+                // Bold matching letters as you type in the input
+                search: function (event, ui) {
+                    setTimeout(() => {
+                        let w = $(this).autocomplete("widget").find("div");
+                        let regExpString = "(" + this.value + ")";
+                        let re = new RegExp(regExpString, "i");
+                        w.html((i, html) => html.replace(re, "<span style='color: red'>$1</span>"));
+                    }, 5);
+                },
+            });
+        }, 5);
     },
     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 {