16. Search contact

As we promised in the previous chapter that we will be adding more features to this app. So we are now adding search functionality.

In this chapter, we will create functionality that will allow the users to search from their contacts by their name or email. Previously we created a form in the navbar, but we didn’t make it functional. Now we are going to make it functional.

search contacts
contacts table

Open your AppHeader.vue file. We already added the v-model attribute to the search input field. Now we need to create that variable in the data() object.

export default {
    data() {
        return {
            ...

            // get value from search input field
            query: ""
        }
    },

    ...
}

Then, we need to create an event listener that will be called when this form is submitted. Attach the onsubmit event listener to the search form.

v-on:submit.prevent="doSearch"

.prevent will prevent the form from reloading the page and let us call our Javascript function. You can learn more about the .prevent event modifier from Vue JS official documentation. Then we need to create that method in our methods object:

methods: {

    doSearch: async function () {
        // create form data object and add searched query in it
        const formData = new FormData()
        formData.append("query", this.query)

        // call an AJAX to the server
        const response = await axios.post(
            this.$apiURL + "/search",

            // send the form data object with the request
            formData,

            // pass headers that contains access token
            // so the server will know which user's contact to search
            {
                headers: this.$headers
            }
        )

        if (response.data.status == "success") {
            // set the contacts array to the one received from API
            store.commit("setContacts", response.data.contacts)
        } else {
            swal.fire("Error", response.data.message, "error")
        }
    },

    ...
}

Now we need to create an API that will handle this request. Open api/server.js and create an API.

// an API to search for contacts
app.post("/search", auth, async function (request, result) {
    // get authenticated user
    const user = request.user;

    // get searched query
    const query = request.fields.query;

    // create an empty array
    const contacts = [];

    // loop through all contacts
    for (let a = 0; a < user.contacts.length; a++) {

        // check where name or email matches with query
        if (user.contacts[a].name.includes(query)
            || user.contacts[a].email.includes(query)) {

            // add in contacts array
            contacts.push(user.contacts[a]);
        }
    }

    // return the new contacts array
    result.json({
        status: "success",
        message: "Data has been fetched.",
        contacts: contacts
    });
});

Type anything in the search box on the top navbar and hit submit button. You will find your searched contact in the list.





Please disable your adblocker or whitelist this site!