WIP insurance search autocomplete.

Add backspace show list feature
Add bold matched letters

src/layouts/insurance-lookup/insurance-lookup.vue

@@ -93,12 +93,6 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
-    data() {
-        return {
-            availableTags: ["Allstate", "Liberty Mutual", "State Farm", "Farmers", "Progressive"],
-            selectedQuery: "",
-        };
-    },
     methods: {
         arePagePrerequisitesValid() {
             return store.getters.vehicle.carId !== null;
@@ -115,16 +109,49 @@ export default {
     },
     mounted() {
         const select = this.handleAutocompleteSelect;
+        // Temporary list of insurance companies for testing
+        var tags = [
+            "21st Century Insurance",
+            "Farmers Insurance",
+            "Grange Insurance",
+            "Liberty Mutual Insurance",
+            "State Auto Insurance",
+            "State Farm Insurance",
+            "Travelers Insurance"
+        ];
+        
         $("#autocomplete").autocomplete({
-            source: this.availableTags,
+            source: function( request, response ) {
-            position: {
+            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
-                my: 'left top+6',
+                response( $.grep( tags, function( item ){
+                    return matcher.test( item );
+                }) );
             },
-            select: function( event, ui ) {
+            position: {
+                my: "left top+6",
+            },
+            minLength: 0,
+            select: function (event, ui) {
                 select(ui.item.value);
-            }
+            },
+            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, "<b>$1</b>")
+                    );
+                },5);
+            },
         });
     },
+    watch: {
+        selectedQuery(newValue, oldValue) {
+            if (oldValue.length > 0 && newValue.length === 0) {
+                $( "#autocomplete" ).autocomplete( "search", "" );
+            }
+        },
+    },
     components: {
         funnelHeader,
         navbar,
@@ -144,9 +171,9 @@ ul {
         padding: 0;
         background: $white;
         border: 1px solid $gray;
-        border-radius: .25rem;
+        border-radius: 0.25rem;
         li {
-            padding: .125rem .5rem;
+            padding: 0.125rem 0.5rem;
             &:hover {
                 background-color: $gray-100;
                 cursor: pointer;