Live Search using PHP and Vue.JS Tutorial

Submitted by oretnom23 on Tuesday, November 22, 2022 - 16:42.

Introduction

In this tutorial, you will learn how to create a Live Search using PHP Language, Vue.js, and Fetch API. The tutorial aims to provide a reference to the IT/CS Students and new programmers on how they can implement a live searching feature on their PHP Projects. The Live Search allows the end-users to search the data that matches or column data containing the searched term and update the data on the client side without leaving or reloading the page. Here, snippets are provided and a sample web application program source code is free to download.

What is Vue.js

Vue.js is commonly called Vue. It is a free and open-source front-end model-view-viewmodel JavaScript framework for creating user interfaces and single-page programs. Visit https://vuejs.org/ to know more and read the documentation on how to use it.

How to Create A Live Search using PHP, Vue.js, and Fetch API?

The Live Searching feature is one of the common features that can be found in web applications. It is always used to filter out or locate data from a list or bulk of data that fits the searched term or word(s). On a web application that loads and retrieves dynamic data using PHP, a live search can be achieved using Vue.js and Fetch API. Fetch API helps to retrieve the search data on the client's page background without leaving the page, and Vue updates the data displayed on the current page.

Example

MySQL Schema

Assuming that we have the following MySQL Schema and Data and the database name is dummy_db.

CREATE TABLE `languages` (
    `id` int(30) NOT NULL,
    `name` varchar(250) NOT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 
INSERT INTO `languages` (`id`, `name`) VALUES
(1, 'PHP'),
(2, 'HTML'),
(3, 'CSS'),
(4, 'JavaScript'),
(5, 'Python'),
(6, 'C++'),
(7, 'C#'),
(8, '.NET'),
(9, 'VB'),
(10, 'ASP.NET'),
(11, 'Java');
 
ALTER TABLE `languages`
  ADD PRIMARY KEY (`id`);
 
ALTER TABLE `languages`
  MODIFY `id` int(30) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;

Database Connection

Next, we need to create a PHP File that connects our application to the database we created.

db-connect.php

<?php
$host = "localhost";
$username = "root";
$pw = "";
$db_name = "dummy_db";
 
$conn = new mysqli($host, $username, $pw, $db_name);
 
if(!$conn){
    die("Database Connection Failed");
}

Interface

Here is the example snippet for the interface of the application that we will make to demonstrate the Live Search using PHP, Vue.js, and Fetch API. Take note that scripts/code on the snippet that I created, I used CDNs for loading the Bootstrap Framework and Vue.js. An Internet connection is a must in order for the snippet will work properly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Search | PHP & Vue.JS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        html, body{
            min-height:100%;
            width:100%;
        }
        tbody:empty:after{
            content:'No records found'
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
        <div class="container">
            <a class="navbar-brand" href="./">Live Search</a>
            <div>
                <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid px-5 my-3" id="SampleApp">
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <h3 class="text-center"><b>Live Search using PHP and Vue.js</b></h3>
            <div class="d-flex w-100 justify-content-center">
                <hr class="w-50">
            </div>
            <div class="card rounded-0 shadow mb-3">
                <div class="card-body">
                    <div class="container-fluid">
                        <div class="mb-3">
                            <div class="input-group flex-nowrap">
                                <input type="search" class="form-control rounded-0" placeholder="Search" aria-label="Search" aria-describedby="addon-wrapping" v-model="search" @keyup="searchLanguages()">
                                <span class="input-group-text rounded-0" id="addon-wrapping"><i class="fa-solid fa-search"></i></span>
                            </div>
                        </div>
                        <div class="list-group rounded-0">
                            <!-- Loop All Programming Languages using VueJS -->
                            <div class="list-group-item rounded-0" v-for="language in languages">
                                {{language}}
                            </div>
                            <!-- End of Loop -->
 
                            <!-- Display Message if There no data has been retrieved -->
                            <div class="list-group-item text-muted text-center" v-if="languages.length <= 0">
                                No data found
                            </div>
                            <!-- end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

PHP API

Next, we will create the PHP File that contains the script of retrieving the data from the database. The snippet below demonstrates a SQL Query that automatically detects if there's a search term/word has sent. If the search term/word exists on the request, the query will use Where Clause and Like Operator to retrieve only the data row that fits to the given search word/term.

getLanguages.php

<?php 
require_once('db-connect.php');
/**
    * Search Language where name is like the search term
    */
$swhere = "";
 
if(isset($_POST['search']) && !empty($_POST['search'])){
    $swhere = " WHERE `name` LIKE '%{$_POST['search']}%' ";
}
$sql = "SELECT * FROM `languages` {$swhere} order by `name` asc";
$query = $conn->query($sql);
$languages = [] ;
if($query->num_rows > 0){
    $languages = array_column($query->fetch_all(MYSQLI_ASSOC), 'name');
}
 
echo json_encode($languages);
$conn->close();

JavaScript

Next is to create the Vue Application Script using JavaScript. The snippet below initiates the Vue Application using the #SampleApp element on the user interface. It also contains the methods and data for loading the sample data on the interface.

app.js

const { createApp } = Vue
 
/**
    * Create Vue App to the selected Element
    */
createApp({
    /**
        * App Data
        */
    data() {
        return {
            languages: [],
            search:''
        }
 
    },
    /**
        * App Methods
        */
    methods:{
 
        /**
            * Retrieve All Data From Database using Fetch API
            */
        getLanguages(){
            fetch('getLanguages.php')
            .then(response => {
                return response.json()
            })
            .then(data => {
                this.languages = Object.values(data)
            } )
        },
        /**
            * Retrieve All Data that Name is like the Search Term From Database using Fetch API
            */
        searchLanguages(){
            var formData = new FormData();
            formData.append('search', this.search)
            fetch('getLanguages.php',{
                method:'POST',
                body: formData
            })
            .then(response => {
                return response.json()
            })
            .then(data => {
                this.languages = Object.values(data)
            } )
        }
    },
    created: function() {
        /**
            * Load All Data when app is created
            */
        this.getLanguages()
    }
}).mount('#SampleApp')

The Live Search functionality will be automatically triggered when the user inputs a character/term/word on the search box. Then, the application will request new data in the background and update the list of data after receiving the new data.

Sample Snapshots

Here are some of the page snapshots using the snippets above.

Complete Data

Filtered Data

No Search Result

DEMO VIDEO

I have provided the source code zip file that I created for this tutorial. You can download it by clicking the Download Button below this article.

That's the end of this tutorial! I hope this Live Search using PHP, Vue.js, and Fetch API Tutorial helps you with what you are looking for and that you'll find it useful for your current and future Projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Add new comment

537 views