Mastering Vue.js Search Functionality

Introduction

In this project, you will learn how to create a simple search function using Vue 2. The search function allows users to search for content and displays the relevant results. This project will help you understand the basics of Vue.js and how to implement a search feature in a web application.

👀 Preview

🎯 Tasks

In this project, you will learn:

How to set up the project structure and prepare the necessary files and folders
How to add the HTML structure to the index.html file
How to implement the JavaScript logic to handle the search functionality
How to style the search input and the search results using CSS

🏆 Achievements

After completing this project, you will be able to:

Use Vue.js to create a responsive and interactive user interface
Implement a search feature that filters and displays relevant content
Integrate HTML, CSS, and JavaScript to create a complete web application
Work with data and computed properties in Vue.js

Set up the project structure

In this step, you will set up the project structure and prepare the necessary files and folders.

The initial code for this question has already been provided. Open the coding environment, and the directory structure is as follows:

├── css
│   └── style.css
├── images
│   ├── bar.png
│   ├── birds.png
│   ├── cat.png
│   ├── dog.png
│   ├── fox.png
│   └── lion.png
├── index.html
└── vue.min.js

The css folder contains the style.css file, which will be used to style the search input and the search results. The images folder contains the images that will be displayed in the search results. The index.html file is the main HTML file for the project, and the vue.min.js file is the Vue.js library.

The main goal of the project is to complete the index.html file by adding the necessary HTML structure, JavaScript logic, and CSS styles to implement the search functionality.

Add the HTML structure

In this step, you will add the HTML structure to the index.html file.

Open the index.html file and add the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Search Function</title>
    <script src="vue.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div id="app">
      <div class="search-wrapper">
        <input type="text" v-model="search" placeholder="Please search" />
      </div>
      <div class="wrapper">
        <div class="card" v-for="post in filteredList">
          <a v-bind:href="post.link" target="_blank">
            <img v-bind:src="post.img" />
            {{ post.title }}
          </a>
        </div>
      </div>
    </div>
    <script>
      // JavaScript code will be added in the next step
    </script>
  </body>
</html>

This HTML structure includes a search input field and a wrapper to display the search results. The search input field is bound to the search data property, and the search results are displayed using the v-for directive to iterate over the filteredList array.

Add the JavaScript logic

In this step, you will add the JavaScript logic to the index.html file.

Inside the <script> tag, add the following code:

class Post {
  constructor(title, link, img) {
    this.title = title;
    this.link = link;
    this.img = img;
  }
}

const app = new Vue({
  el: "#app",
  data: {
    search: "",
    postList: [
      new Post(
        "kitty",
        "https://unsplash.com/s/photos/cat",
        "./images/cat.png"
      ),
      new Post("puppy", "https://unsplash.com/@joeyc", "./images/dog.png"),
      new Post(
        "polar bear",
        "https://unsplash.com/@hansjurgen007",
        "./images/bar.png"
      ),
      new Post(
        "little lion",
        "https://unsplash.com/@hansjurgen007",
        "./images/lion.png"
      ),
      new Post(
        "little bird",
        "https://unsplash.com/@eugenechystiakov",
        "./images/birds.png"
      ),
      new Post(
        "fox",
        "https://unsplash.com/@introspectivedsgn",
        "./images/fox.png"
      )
    ]
  },
  computed: {
    filteredList() {
      return this.postList.filter((post) => {
        return post.title.includes(this.search);
      });
    }
  }
});

This JavaScript code defines a Post class and creates a new Vue instance with the necessary data and computed properties to handle the search functionality.

The Post class is used to create instances of posts with a title, link, and image properties.
The Vue instance (app) is created with the following properties:
- el: Specifies the element to mount the Vue instance.
- data: Contains the search property for the search input and an array of postList items.
- computed: Defines a filteredList computed property that filters the postList based on the search input.