1

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/vue@next"></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

1 Answer 1

1

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/vue@next"></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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.