Implement Search Suggestions with Vue.js

Introduction

In this project, you will learn how to implement an input search suggestions feature using Vue.js 2.x. This feature is commonly used in web applications to provide users with a list of matching data as they type in the search input.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to capitalize the first letter of the table headers in the data table
• How to implement the search suggestions functionality based on the user's input

🏆 Achievements

After completing this project, you will be able to:

• Manipulate the DOM using Vue.js directives like v-for and v-model
• Create computed properties in Vue.js to filter and display the search results
• Apply basic styling to the table and search input

Skills Graph

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

├── index.html
└── js
    └── vue.js

Among them:

• js/vue.js is the Vue 2.x file.
• index.html is the page layout and functional implementation logic code.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

The search suggestion function has not been implemented yet.

Capitalize Table Headers

In this step, you will learn how to capitalize the first letter of the table headers in the data table.

1. Open the index.html file in your code editor.
2. Locate the table header section in the HTML code:

<thead>
  <tr>
    <td v-for="col in columns">
      {{col.slice(0,1).toUpperCase() + col.slice(1)}}
    </td>
  </tr>
</thead>

3. The v-for directive is used to loop through the columns array and display the corresponding table headers. The code {{col.slice(0,1).toUpperCase() + col.slice(1)}} is used to capitalize the first letter of each column name.

   • col.slice(0,1) extracts the first character of the column name.
   • .toUpperCase() converts the first character to uppercase.
   • + col.slice(1) concatenates the capitalized first character with the rest of the column name.

4. Save the index.html file and refresh the page. You should now see the table headers with the first letter capitalized.

Implement Search Suggestions

In this step, you will learn how to implement the search suggestions functionality.

1. In the index.html file, find the search input and the corresponding Vue.js code, and add some of the code as follows:

<span>Search for names: </span>
<!-- Add v-model code -->
<input placeholder="Enter the name to search" v-model="searchQuery" />

data: {
  searchQuery: "",
  // ... other data properties
},

// The following code is the code that needs to be added
computed: {
  newData() {
    return this.data.filter((item) => {
      return item.name
        .toLowerCase()
        .includes(this.searchQuery.toLowerCase());
    });
  }
}

2. The searchQuery data property is bound to the search input using the v-model directive. This allows the Vue.js instance to track the user's input.
3. The newData computed property filters the data array based on the searchQuery value. It checks if the name property of each data item includes the search query (case-insensitive).
4. The filtered data is then displayed in the table body:

<tbody>
  <tr v-for="entry in newData">
    <td v-for="col in columns">{{entry[col]}}</td>
  </tr>
</tbody>

5. The v-for directive is used to loop through the newData array and display each data item in a table row.
6. Save the index.html file and refresh the page. You should now be able to see the search suggestions functionality working as expected.

Now, you have completed the implementation of the input search suggestions feature in the provided Vue.js project. The finished result is as follows:

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.