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