WIP insurance search page.

This commit is contained in:
Bryan Mauger 2024-02-28 08:44:00 -05:00
parent 2912407afd
commit 3e3e2d89db

View file

@ -78,7 +78,7 @@ export default {
}, },
forwardButtonAction() { forwardButtonAction() {
// Still needs wired up when insurance-details page is created // Still needs wired up when insurance-details page is created
alert("Needs wired up!") alert("Needs wired up!");
}, },
}, },
mounted() { mounted() {
@ -91,15 +91,17 @@ export default {
"Liberty Mutual Insurance", "Liberty Mutual Insurance",
"State Auto Insurance", "State Auto Insurance",
"State Farm Insurance", "State Farm Insurance",
"Travelers Insurance" "Travelers Insurance",
]; ];
$("#autocomplete").autocomplete({ $("#autocomplete").autocomplete({
source: function( request, response ) { source: function (request, response) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" ); var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response( $.grep( tags, function( item ){ response(
return matcher.test( item ); $.grep(tags, function (item) {
}) ); return matcher.test(item);
})
);
}, },
position: { position: {
my: "left top+6", my: "left top+6",
@ -109,21 +111,19 @@ export default {
select(ui.item.value); select(ui.item.value);
}, },
// Bold matching letters as you type in the input // Bold matching letters as you type in the input
search: function(event, ui) { search: function (event, ui) {
setTimeout(() => { setTimeout(() => {
let w = $(this).autocomplete("widget").find("div"), let w = $(this).autocomplete("widget").find("div"),
re = new RegExp("("+this.value+")", "i"); re = new RegExp("(" + this.value + ")", "i");
w.html((i, html) => w.html((i, html) => html.replace(re, "<span>$1</span>"));
html.replace(re, "<span>$1</span>") }, 5);
);
},5);
}, },
}); });
}, },
watch: { watch: {
selectedQuery(newValue, oldValue) { selectedQuery(newValue, oldValue) {
if (oldValue.length > 0 && newValue.length === 0) { if (oldValue.length > 0 && newValue.length === 0) {
$( "#autocomplete" ).autocomplete( "search", "" ); $("#autocomplete").autocomplete("search", "");
} }
}, },
}, },
@ -142,7 +142,7 @@ ul {
position: absolute; position: absolute;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: .25rem; padding: 0.25rem;
background: $white; background: $white;
border: 1px solid $gray; border: 1px solid $gray;
border-radius: 0.25rem; border-radius: 0.25rem;
@ -155,10 +155,10 @@ ul {
.ui-menu-item-wrapper { .ui-menu-item-wrapper {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px; border-radius: 2px;
padding-left: .25rem; padding-left: 0.25rem;
span { span {
font-weight: 600; font-weight: 600;
} }
&.ui-state-active { &.ui-state-active {
border: 1px solid $gray-200; border: 1px solid $gray-200;
border-radius: 2px; border-radius: 2px;