Issue
I am trying to create a searching component using Vue 3 to allow a user to insert text and have it display all available results. I am basing my code off this example: https://codepen.io/thaekeh/pen/PoGJRKQ
However, it does not seem to want to work, as I am sure it has something to do with v-model for the search bar. The search bar also seems to be floating and wont stay in one place, so if anyone has a fix for that also that would be great.
This is my code thus far (excuse the missing pictures):
//############--search.js--############
//--------------- PAGE TITLE ---------------
// Vue object: Title
const PageTitle = {
data() {
return {
title: 'Search'
}
}
}
Vue.createApp(PageTitle).mount('#page-title')
//--------------- FOOTER ---------------//
// Vue object: Footer text
const FooterText = {
data() {
return {
footer_text: 'Created by ##'
}
}
}
Vue.createApp(FooterText).mount('#footer-text')
//--------------- NAVIGATION (Cart) ---------------//
// Vue object: Title
const CartTitle = {
data() {
return {
cart_title: 'Cart'
}
}
}
Vue.createApp(CartTitle).mount('#cart-title')
//--------------- NAVIGATION (Main pages) ---------------//
// Vue object: Title
const MainNav = {
data() {
return {
home: 'Home',
for_hire: 'For Hire',
about: 'About',
contact_us: 'Contact Us',
search: 'Search'
}
}
}
Vue.createApp(MainNav).mount('#nav-titles')
//--------------- SEARCH FUNCTION ---------------//
// Custom Vue Component: Binding information to each hiring container
const searchChoiceBox = {
name: 'search-choice-box',
props: ['name', 'image', 'price', 'rating'],
template: `
<div class = "option_container">
<img class = "option_image" :src="image">
<i class="fa fa-cart-plus fa-4x" id = "add_cart"></i>
<h4 class = "option_name">{{name}}</h4>
<h4 class = "option_price">{{price}}</h4>
<img class = "rating" :src="rating">
</div>
`
};
// Vue object: Available options to search
const SearchData = Vue.createApp({
data() {
return {
searchValue: '',
options: [{
name: 'Akira Tozawa',
image_src: "../Assets/Wrestlers/wrestler_13.png",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$30/hour"
},
{
name: 'Bobby Lashley',
image_src: "../Assets/Wrestlers/wrestler_1.png",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$200/hour"
},
{
name: 'Brock Lesnar',
image_src: "../Assets/Wrestlers/wrestler_2.png",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$300/hour"
},
{
name: 'Commander Azeez',
image_src: "../Assets/Wrestlers/wrestler_3.png",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$40/hour"
},
{
name: 'Corey Grimes',
image_src: "../Assets/Wrestlers/wrestler_14.png",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$20/hour"
},
{
name: 'Drew McIntyre',
image_src: "../Assets/Wrestlers/wrestler_4.png",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$100/hour"
},
{
name: 'Gran Metalik',
image_src: "../Assets/Wrestlers/wrestler_5.png",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$60/hour"
},
{
name: 'Jeff Hardy',
image_src: "../Assets/Wrestlers/wrestler_6.png",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$120/hour"
},
{
name: 'Jinder Mahal',
image_src: "../Assets/Wrestlers/wrestler_15.png",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$50/hour"
},
{
name: 'John Cena',
image_src: "../Assets/Wrestlers/wrestler_7.png",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$900/hour"
},
{
name: 'Kevin Owens',
image_src: "../Assets/Wrestlers/wrestler_8.png",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$85/hour"
},
{
name: 'Lince Derado',
image_src: "../Assets/Wrestlers/wrestler_9.png",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$60/hour"
},
{
name: 'Pete Dunne',
image_src: "../Assets/Wrestlers/wrestler_10.png",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$70/hour"
},
{
name: 'Sheamus',
image_src: "../Assets/Wrestlers/wrestler_11.png",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$80/hour"
},
{
name: 'T-Bone',
image_src: "../Assets/Wrestlers/wrestler_16.png",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$30/hour"
},
{
name: 'Undertaker',
image_src: "../Assets/Wrestlers/wrestler_12.png",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$400/hour"
},
{
name: 'Table',
image_src: "../Assets/Items/table.jpg",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$50/item"
},
{
name: 'Steel Chair',
image_src: "../Assets/Items/steel_chair.jpg",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$30/item"
},
{
name: 'Ladder',
image_src: "../Assets/Items/ladder.jpg",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$100/item"
},
{
name: 'Guitar',
image_src: "../Assets/Items/guitar.jpg",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$40/item"
},
{
name: 'Thumbtacks',
image_src: "../Assets/Items/thumbtacks.jpg",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$15/item"
},
{
name: 'Kendo stick',
image_src: "../Assets/Items/kendo_stick.jpg",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$30/item"
},
{
name: 'Sledgehammer',
image_src: "../Assets/Items/sledge_hammer.jpg",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$45/item"
},
{
name: 'Crutch',
image_src: "../Assets/Items/crutch.jpg",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$25/item"
},
{
name: 'Wrestling ring',
image_src: "../Assets/Rings/wrestling_ring.jpg",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$400/ring"
},
{
name: 'MMA ring',
image_src: "../Assets/Rings/mma_ring.jpg",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$500/ring"
},
{
name: 'Wrestling mat',
image_src: "../Assets/Rings/wrestling_mat.jpg",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$50/mat"
},
{
name: 'Trampoline',
image_src: "../Assets/Rings/trampoline.jpg",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$400/item"
},
{
name: 'DIY ring',
image_src: "../Assets/Rings/diy_ring.jpg",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$30/ring"
},
{
name: 'TLC match',
image_src: "../Assets/Match type/tlc_match.jpg",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$300"
},
{
name: 'Hell in a cell',
image_src: "../Assets/Match type/hell_in_cell.jpg",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$1000"
},
{
name: 'Extreme rules',
image_src: "../Assets/Match type/extreme_rules.jpg",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$500"
},
{
name: 'Backstage brawl',
image_src: "../Assets/Match type/backstage_brawl.jpg",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$150"
},
{
name: 'TLC match',
image_src: "../Assets/Match type/royal_rumble.jpg",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$400"},
]};
},
computed: {
searchResult() {
let tempHire = this.options
if (this.searchValue != '' && this.searchValue) {
tempHire = tempHire.filter((item) => {
return item.name
.toUpperCase()
.includes(this.searchValue.toUpperCase())
})
}
return tempHire
}
}
});
SearchData.component('search-choice-box', searchChoiceBox);
SearchData.mount('#search-data');/* Stylesheet for SIT120 Project - search.css */
/*----------------------------------------------------*/
/*/////////////////////////-NO margins-//////////////////////////////*/
/* Expands to width of screen*/
body, html {
margin: 0;
padding: 0;
}
/*/////////////////////////-Header Navigation-//////////////////////////////*/
/* Top navigation (cart) */
.cart_nav ul {
list-style-type: none;
margin: auto;
overflow: hidden;
background-color: #C6393F;
}
.cart_nav li {
float: right;
}
.cart_nav li a {
font-family: Actor;
font-size: 18px;
font-style: normal;
font-weight:normal;
padding: 15px 55px 15px 20px;
color: white;
display: inline-block;
text-decoration: none;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
}
.cart_nav li a:hover
{
color:#AAAAAA;
}
/*/////////////////////////-Cart Number-//////////////////////////////*/
/* Cart number (circled) */
.cart_items
{
font-family: Righteous;
font-size: 16px;
font-weight: bold;
color: white;
background-color:#2C2C2C;
float: right;
margin-top: 16px;
margin-right: 16px;
margin-left: -33px;
border-radius: 60%;
width: 25px;
height: 22px;
text-align: center;
}
/*/////////////////////////-Cart icons-//////////////////////////////*/
/* Top navigation ICONS (cart) */
.cart_icon
{
display:inline-flex;
width: 40px;
height: 40px;
margin-top: -20px;
margin-bottom: -15px;
margin-right: -17px;
padding-left: 8px;
}
/*/////////////////////////-Main navigation-//////////////////////////////*/
/* Main navigation (pages) */
.page_nav ul
{
list-style-type: none;
margin: auto;
overflow: hidden;
background-color: #2C2C2C;
}
.page_nav li
{
float: left;
}
.page_nav li a {
font-family: Bai Jamjuree;
font-size: 22px;
font-weight: bold;
padding: 15px;
line-height: 22px;
color: #AAAAAA;
display: inline-block;
padding: 40px 60px 35px 30px;
text-decoration: none;
letter-spacing: 0.07em;
text-transform: uppercase;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
}
.page_nav li a:hover
{
color:#FFFFFF;
}
.page_nav li a.active
{
text-decoration: overline;
color:#FFFFFF;
}
.page_nav li a:focus
{
text-decoration: overline;
color:#FFFFFF;
}
/*/////////////////////////-Navigation sub-menus-//////////////////////////////*/
/*/////////////////////////-Navigation icon (Search)-//////////////////////////////*/
/* Main navigation search ICON */
.search_icon
{
display:inline-block;
width: 35px;
height: 37px;
margin-top: -40px;
margin-bottom: -15px;
margin-right: -50px;
padding-left: 13px;
padding-right: 45px;
}
/*/////////////////////////-LOGO-//////////////////////////////*/
/* Main logo (Wrestle Hire logo) */
.site_logo
{
display: inline;
float: left;
width: 180px;
height: 145px;
padding-right: 50px;
margin-bottom: -20px;
margin-left: -30px;
margin-top: -10px;
}
.site_logo:hover
{
cursor: pointer;
}
/*/////////////////////////-FOOTER-//////////////////////////////*/
.footer_component{
border-top: solid #C6393F;
border-width: 15px;
background: #2C2C2C;
position: absolute;
height:100%;
width:100%;
height: 130px;
;
}
.text_footer {
color: #424242;
font-family: Actor;
font-weight: lighter;
font-size: 18px;
text-align: center;
margin-top: 50px;
}
/*/////////////////////////-SEARCH BAR-//////////////////////////////*/
.search_wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #807d7d;
max-width: 550px;
width: 100%;
padding: 15px;
border-radius: 5px;
display: flex;
justify-content: space-between;
margin-top: -100px;
}
.search-bar
{
width: 80%;
padding: 15px 20px;
border: none;
border-radius: 5px;
font-weight: bold;
font-family: Bai Jamjuree;
font-size: 18px;
color: #2d2d2d;
}
::placeholder {
font-family: Abel;
font-size: 22px;
color: rgb(181, 179, 179);
}
.search_button
{
background: #C6393F;
width:10%;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.search_button .fa
{
position: relative;
top: -10%;
transform: translate(50%, 50%);
font-size: 30px;
}
/*/////////////////////////-Hiring selection - Wrestlers-//////////////////////////////*/
/* Selection layout */
.option_row
{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
margin-top: 10em;
}
.option_container
{
flex-basis: 20%;
padding: 17px;
min-width: 200px;
transition: transform 0.5s;
transition: 0.5s;
}
.option_container:hover
{
transform: translateY(-3px);
box-shadow: 0 0 15px #C6393F;
border-radius: 3px;
cursor: pointer;
}
.option_list_container
{
margin: auto;
padding-left: 40px;
padding-right: 40px;
}
/* Hiring selection information */
.option_list_container h2
{
font-family: Rajdhani;
font-size: 48px;
color: #2C2C2C;
text-align: center;
margin: 0 auto 45px;
position: relative;
line-height: 60px;
padding-top: 10px;
color: #555;
}
.option_list_container h2::after
{
content: '';
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position:absolute;
bottom: 0;
left: 44%;
transform: translateX(50%);
}
.option_name
{
font-family: Bai Jamjuree;
font-size: 1.2em;
margin-top: -1px;
}
.option_image
{
width: 100%;
transition: 0.5s;
}
.rating
{
max-width: 75px;
display: flex;
position: relative;
top: -2em;
}
.option_price
{
font-family: Bai Jamjuree;
font-size: 0.9em;
position: relative;
top: -25px;
}
#add_cart
{
color: black;
float: right;
transition: 0.3s;
}
#add_cart:hover
{
color: #C6393F;
text-shadow: 0px 0px 10px grey;
cursor: pointer;
}<!--HTML FILE: search.html-->
<!DOCTYPE html>
<html>
<head>
<!--Stylesheets-->
<link rel="stylesheet" type= "text/css" href="search.css">
<!--Link Vue Framework-->
<script src="https://unpkg.com/[email protected]"></script>
<!-- Set responsiveness to screen size -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Google fonts-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Actor">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bai Jamjuree">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">
<!--Search icon (Font Awesome)-->
<script src="https://use.fontawesome.com/d83f9b7e69.js"></script>
<!--Page Icon-->
<link rel="icon" href="../Assets/page_icon.png">
<!-- Page title-->
<title id="page-title">{{title}}</title>
</head>
<body id = "hire-now-button">
<!--NAVIGATION-->
<header>
<!--Top navigation section (login, account and cart)-->
<div class = "cart_nav" id = "cart-title">
<ul>
<div class = "cart_items">0</div>
<li><a href="#cart">{{cart_title}}<img class = "cart_icon" src="../Assets/cart.png" alt="cart_icon"></a></li>
</ul>
</div>
<!--Main navigation section (main pages)-->
<div class = "page_nav" id = "nav-titles">
<ul>
<!--All main pages will have .html files, this example has the contact as a separate file (and empty files)-->
<a href="../Home/home.html"><img href ="../Home/home.html" class = "site_logo" id = "siteLogo" src="../Assets/website_logo.png"/></a>
<li><a class = "active" href="../Home/home.html">{{home}}</a></li>
<li><a href="../Hiring Selection/hiring_selection.html">{{for_hire}}</a></li>
<li><a href="">{{about}}</a></li>
<li><a href="../Contact/contact.html">{{contact_us}}</a></li>
<li class = "search" style="float:right"><a href = "">{{search}}<img class = "search_icon" src="../Assets/search.png" alt="search_icon"></a></li>
</ul>
</div>
</header>
<!--Body for search bar and options-->
<div id="search-data">
<!--Search bar to find all hiring options on the site-->
<div class="search_wrapper">
<input type="text" class ="search-bar" v-model = "searchValue" placeholder="Search hiring options of Wrestle Hire">
<div class = "search_button">
<i class="fa fa-search"></i>
</div>
</div>
<!--All hiring options available-->
<div class = "option_list_container">
<div class = "option_row">
<search-choice-box v-for="hire in options"
:name="hire.name" :image="hire.image_src"
:rating="hire.star_ratings":price = "hire.list_price">
</search-choice-box>
</div>
</div>
</div>
<!--Footer of page-->
<footer id = "footer-text">
<div class="footer_component">
<div class = "text_footer" >
<h2 >{{footer_text}}</h2>
</div>
</div>
</footer>
</body>
<!-- Link JavaScript file -->
<script src="search.js"></script>
</html>I am using a computed property to filter out the search, however I am unsure if that even works either. Any advice would be great, and please answer by changing up the code as I am very new to Vue 3, thank you
Solution
your problem was found in
`<search-choice-box v-for="hire in options" :name="hire.name" :image="hire.image_src" :rating="hire.star_ratings":price = "hire.list_price"> </search-choice-box>`
. Why? because the options is a data and you want is the result of the computed searchResult. So, you can call in v-for to this. You can use this code
`<search-choice-box v-for="hire in searchResult" :name="hire.name" :image="hire.image_src" :rating="hire.star_ratings":price = "hire.list_price"> </search-choice-box>`
//############--search.js--############
//--------------- PAGE TITLE ---------------
// Vue object: Title
const PageTitle = {
data() {
return {
title: 'Search'
}
}
}
Vue.createApp(PageTitle).mount('#page-title')
//--------------- FOOTER ---------------//
// Vue object: Footer text
const FooterText = {
data() {
return {
footer_text: 'Created by ##'
}
}
}
Vue.createApp(FooterText).mount('#footer-text')
//--------------- NAVIGATION (Cart) ---------------//
// Vue object: Title
const CartTitle = {
data() {
return {
cart_title: 'Cart'
}
}
}
Vue.createApp(CartTitle).mount('#cart-title')
//--------------- NAVIGATION (Main pages) ---------------//
// Vue object: Title
const MainNav = {
data() {
return {
home: 'Home',
for_hire: 'For Hire',
about: 'About',
contact_us: 'Contact Us',
search: 'Search'
}
}
}
Vue.createApp(MainNav).mount('#nav-titles')
//--------------- SEARCH FUNCTION ---------------//
// Custom Vue Component: Binding information to each hiring container
const searchChoiceBox = {
name: 'search-choice-box',
props: ['name', 'image', 'price', 'rating'],
template: `
<div class = "option_container">
<img class = "option_image" :src="image">
<i class="fa fa-cart-plus fa-4x" id = "add_cart"></i>
<h4 class = "option_name">{{name}}</h4>
<h4 class = "option_price">{{price}}</h4>
<img class = "rating" :src="rating">
</div>
`
};
// Vue object: Available options to search
const SearchData = Vue.createApp({
data() {
return {
searchValue: '',
options: [{
name: 'Akira Tozawa',
image_src: "../Assets/Wrestlers/wrestler_13.png",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$30/hour"
},
{
name: 'Bobby Lashley',
image_src: "../Assets/Wrestlers/wrestler_1.png",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$200/hour"
},
{
name: 'Brock Lesnar',
image_src: "../Assets/Wrestlers/wrestler_2.png",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$300/hour"
},
{
name: 'Commander Azeez',
image_src: "../Assets/Wrestlers/wrestler_3.png",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$40/hour"
},
{
name: 'Corey Grimes',
image_src: "../Assets/Wrestlers/wrestler_14.png",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$20/hour"
},
{
name: 'Drew McIntyre',
image_src: "../Assets/Wrestlers/wrestler_4.png",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$100/hour"
},
{
name: 'Gran Metalik',
image_src: "../Assets/Wrestlers/wrestler_5.png",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$60/hour"
},
{
name: 'Jeff Hardy',
image_src: "../Assets/Wrestlers/wrestler_6.png",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$120/hour"
},
{
name: 'Jinder Mahal',
image_src: "../Assets/Wrestlers/wrestler_15.png",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$50/hour"
},
{
name: 'John Cena',
image_src: "../Assets/Wrestlers/wrestler_7.png",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$900/hour"
},
{
name: 'Kevin Owens',
image_src: "../Assets/Wrestlers/wrestler_8.png",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$85/hour"
},
{
name: 'Lince Derado',
image_src: "../Assets/Wrestlers/wrestler_9.png",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$60/hour"
},
{
name: 'Pete Dunne',
image_src: "../Assets/Wrestlers/wrestler_10.png",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$70/hour"
},
{
name: 'Sheamus',
image_src: "../Assets/Wrestlers/wrestler_11.png",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$80/hour"
},
{
name: 'T-Bone',
image_src: "../Assets/Wrestlers/wrestler_16.png",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$30/hour"
},
{
name: 'Undertaker',
image_src: "../Assets/Wrestlers/wrestler_12.png",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$400/hour"
},
{
name: 'Table',
image_src: "../Assets/Items/table.jpg",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$50/item"
},
{
name: 'Steel Chair',
image_src: "../Assets/Items/steel_chair.jpg",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$30/item"
},
{
name: 'Ladder',
image_src: "../Assets/Items/ladder.jpg",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$100/item"
},
{
name: 'Guitar',
image_src: "../Assets/Items/guitar.jpg",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$40/item"
},
{
name: 'Thumbtacks',
image_src: "../Assets/Items/thumbtacks.jpg",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$15/item"
},
{
name: 'Kendo stick',
image_src: "../Assets/Items/kendo_stick.jpg",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$30/item"
},
{
name: 'Sledgehammer',
image_src: "../Assets/Items/sledge_hammer.jpg",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$45/item"
},
{
name: 'Crutch',
image_src: "../Assets/Items/crutch.jpg",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$25/item"
},
{
name: 'Wrestling ring',
image_src: "../Assets/Rings/wrestling_ring.jpg",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$400/ring"
},
{
name: 'MMA ring',
image_src: "../Assets/Rings/mma_ring.jpg",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$500/ring"
},
{
name: 'Wrestling mat',
image_src: "../Assets/Rings/wrestling_mat.jpg",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$50/mat"
},
{
name: 'Trampoline',
image_src: "../Assets/Rings/trampoline.jpg",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$400/item"
},
{
name: 'DIY ring',
image_src: "../Assets/Rings/diy_ring.jpg",
star_ratings: "../Assets/Ratings/2_stars.png",
list_price: "$30/ring"
},
{
name: 'TLC match',
image_src: "../Assets/Match type/tlc_match.jpg",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$300"
},
{
name: 'Hell in a cell',
image_src: "../Assets/Match type/hell_in_cell.jpg",
star_ratings: "../Assets/Ratings/5_stars.png",
list_price: "$1000"
},
{
name: 'Extreme rules',
image_src: "../Assets/Match type/extreme_rules.jpg",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$500"
},
{
name: 'Backstage brawl',
image_src: "../Assets/Match type/backstage_brawl.jpg",
star_ratings: "../Assets/Ratings/3_stars.png",
list_price: "$150"
},
{
name: 'TLC match',
image_src: "../Assets/Match type/royal_rumble.jpg",
star_ratings: "../Assets/Ratings/4_stars.png",
list_price: "$400"},
]};
},
computed: {
searchResult() {
let tempHire = this.options
if (this.searchValue != '' && this.searchValue) {
tempHire = tempHire.filter((item) => {
return item.name
.toUpperCase()
.includes(this.searchValue.toUpperCase())
})
}
return tempHire
}
}
});
SearchData.component('search-choice-box', searchChoiceBox);
SearchData.mount('#search-data');
/* Stylesheet for SIT120 Project - search.css */
/*----------------------------------------------------*/
/*/////////////////////////-NO margins-//////////////////////////////*/
/* Expands to width of screen*/
body, html {
margin: 0;
padding: 0;
}
/*/////////////////////////-Header Navigation-//////////////////////////////*/
/* Top navigation (cart) */
.cart_nav ul {
list-style-type: none;
margin: auto;
overflow: hidden;
background-color: #C6393F;
}
.cart_nav li {
float: right;
}
.cart_nav li a {
font-family: Actor;
font-size: 18px;
font-style: normal;
font-weight:normal;
padding: 15px 55px 15px 20px;
color: white;
display: inline-block;
text-decoration: none;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
}
.cart_nav li a:hover
{
color:#AAAAAA;
}
/*/////////////////////////-Cart Number-//////////////////////////////*/
/* Cart number (circled) */
.cart_items
{
font-family: Righteous;
font-size: 16px;
font-weight: bold;
color: white;
background-color:#2C2C2C;
float: right;
margin-top: 16px;
margin-right: 16px;
margin-left: -33px;
border-radius: 60%;
width: 25px;
height: 22px;
text-align: center;
}
/*/////////////////////////-Cart icons-//////////////////////////////*/
/* Top navigation ICONS (cart) */
.cart_icon
{
display:inline-flex;
width: 40px;
height: 40px;
margin-top: -20px;
margin-bottom: -15px;
margin-right: -17px;
padding-left: 8px;
}
/*/////////////////////////-Main navigation-//////////////////////////////*/
/* Main navigation (pages) */
.page_nav ul
{
list-style-type: none;
margin: auto;
overflow: hidden;
background-color: #2C2C2C;
}
.page_nav li
{
float: left;
}
.page_nav li a {
font-family: Bai Jamjuree;
font-size: 22px;
font-weight: bold;
padding: 15px;
line-height: 22px;
color: #AAAAAA;
display: inline-block;
padding: 40px 60px 35px 30px;
text-decoration: none;
letter-spacing: 0.07em;
text-transform: uppercase;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
}
.page_nav li a:hover
{
color:#FFFFFF;
}
.page_nav li a.active
{
text-decoration: overline;
color:#FFFFFF;
}
.page_nav li a:focus
{
text-decoration: overline;
color:#FFFFFF;
}
/*/////////////////////////-Navigation sub-menus-//////////////////////////////*/
/*/////////////////////////-Navigation icon (Search)-//////////////////////////////*/
/* Main navigation search ICON */
.search_icon
{
display:inline-block;
width: 35px;
height: 37px;
margin-top: -40px;
margin-bottom: -15px;
margin-right: -50px;
padding-left: 13px;
padding-right: 45px;
}
/*/////////////////////////-LOGO-//////////////////////////////*/
/* Main logo (Wrestle Hire logo) */
.site_logo
{
display: inline;
float: left;
width: 180px;
height: 145px;
padding-right: 50px;
margin-bottom: -20px;
margin-left: -30px;
margin-top: -10px;
}
.site_logo:hover
{
cursor: pointer;
}
/*/////////////////////////-FOOTER-//////////////////////////////*/
.footer_component{
border-top: solid #C6393F;
border-width: 15px;
background: #2C2C2C;
position: absolute;
height:100%;
width:100%;
height: 130px;
;
}
.text_footer {
color: #424242;
font-family: Actor;
font-weight: lighter;
font-size: 18px;
text-align: center;
margin-top: 50px;
}
/*/////////////////////////-SEARCH BAR-//////////////////////////////*/
.search_wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #807d7d;
max-width: 550px;
width: 100%;
padding: 15px;
border-radius: 5px;
display: flex;
justify-content: space-between;
margin-top: -100px;
}
.search-bar
{
width: 80%;
padding: 15px 20px;
border: none;
border-radius: 5px;
font-weight: bold;
font-family: Bai Jamjuree;
font-size: 18px;
color: #2d2d2d;
}
::placeholder {
font-family: Abel;
font-size: 22px;
color: rgb(181, 179, 179);
}
.search_button
{
background: #C6393F;
width:10%;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.search_button .fa
{
position: relative;
top: -10%;
transform: translate(50%, 50%);
font-size: 30px;
}
/*/////////////////////////-Hiring selection - Wrestlers-//////////////////////////////*/
/* Selection layout */
.option_row
{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
margin-top: 10em;
}
.option_container
{
flex-basis: 20%;
padding: 17px;
min-width: 200px;
transition: transform 0.5s;
transition: 0.5s;
}
.option_container:hover
{
transform: translateY(-3px);
box-shadow: 0 0 15px #C6393F;
border-radius: 3px;
cursor: pointer;
}
.option_list_container
{
margin: auto;
padding-left: 40px;
padding-right: 40px;
}
/* Hiring selection information */
.option_list_container h2
{
font-family: Rajdhani;
font-size: 48px;
color: #2C2C2C;
text-align: center;
margin: 0 auto 45px;
position: relative;
line-height: 60px;
padding-top: 10px;
color: #555;
}
.option_list_container h2::after
{
content: '';
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position:absolute;
bottom: 0;
left: 44%;
transform: translateX(50%);
}
.option_name
{
font-family: Bai Jamjuree;
font-size: 1.2em;
margin-top: -1px;
}
.option_image
{
width: 100%;
transition: 0.5s;
}
.rating
{
max-width: 75px;
display: flex;
position: relative;
top: -2em;
}
.option_price
{
font-family: Bai Jamjuree;
font-size: 0.9em;
position: relative;
top: -25px;
}
#add_cart
{
color: black;
float: right;
transition: 0.3s;
}
#add_cart:hover
{
color: #C6393F;
text-shadow: 0px 0px 10px grey;
cursor: pointer;
}
<!--HTML FILE: search.html-->
<!DOCTYPE html>
<html>
<head>
<!--Stylesheets-->
<link rel="stylesheet" type= "text/css" href="search.css">
<!--Link Vue Framework-->
<script src="https://unpkg.com/[email protected]"></script>
<!-- Set responsiveness to screen size -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Google fonts-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Actor">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bai Jamjuree">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">
<!--Search icon (Font Awesome)-->
<script src="https://use.fontawesome.com/d83f9b7e69.js"></script>
<!--Page Icon-->
<link rel="icon" href="../Assets/page_icon.png">
<!-- Page title-->
<title id="page-title">{{title}}</title>
</head>
<body id = "hire-now-button">
<!--NAVIGATION-->
<header>
<!--Top navigation section (login, account and cart)-->
<div class = "cart_nav" id = "cart-title">
<ul>
<div class = "cart_items">0</div>
<li><a href="#cart">{{cart_title}}<img class = "cart_icon" src="../Assets/cart.png" alt="cart_icon"></a></li>
</ul>
</div>
<!--Main navigation section (main pages)-->
<div class = "page_nav" id = "nav-titles">
<ul>
<!--All main pages will have .html files, this example has the contact as a separate file (and empty files)-->
<a href="../Home/home.html"><img href ="../Home/home.html" class = "site_logo" id = "siteLogo" src="../Assets/website_logo.png"/></a>
<li><a class = "active" href="../Home/home.html">{{home}}</a></li>
<li><a href="../Hiring Selection/hiring_selection.html">{{for_hire}}</a></li>
<li><a href="">{{about}}</a></li>
<li><a href="../Contact/contact.html">{{contact_us}}</a></li>
<li class = "search" style="float:right"><a href = "">{{search}}<img class = "search_icon" src="../Assets/search.png" alt="search_icon"></a></li>
</ul>
</div>
</header>
<!--Body for search bar and options-->
<div id="search-data">
<!--Search bar to find all hiring options on the site-->
<div class="search_wrapper">
<input type="text" class ="search-bar" v-model = "searchValue" placeholder="Search hiring options of Wrestle Hire">
<div class = "search_button">
<i class="fa fa-search"></i>
</div>
</div>
<!--All hiring options available-->
<div class = "option_list_container">
<div class = "option_row">
<search-choice-box v-for="hire in searchResult"
:name="hire.name" :image="hire.image_src"
:rating="hire.star_ratings":price = "hire.list_price">
</search-choice-box>
</div>
</div>
</div>
<!--Footer of page-->
<footer id = "footer-text">
<div class="footer_component">
<div class = "text_footer" >
<h2 >{{footer_text}}</h2>
</div>
</div>
</footer>
</body>
<!-- Link JavaScript file -->
<script src="search.js"></script>
</html>
Answered By – Rizal Arfiyan
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0