diff --git a/src/layouts/insurance-lookup/insurance-lookup.vue b/src/layouts/insurance-lookup/insurance-lookup.vue index 0b5e94a7d..72eb8fe12 100644 --- a/src/layouts/insurance-lookup/insurance-lookup.vue +++ b/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; @@ -112,19 +106,52 @@ export default { forwardButtonAction() { alert("Still needs to be wired up"); }, - }, + }, 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, - position: { - my: 'left top+6', + source: function( request, response ) { + var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" ); + 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, "$1") + ); + },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;