Live Search using PHP and Vue.JS Tutorial

Javierx · 2025-02-27T03:16:16+0000

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"

>
<div

class

=

"list-group-item rounded-0"

v-for

=

"language in languages"

>
{{language}}
</

div

>
<div

class

=

"list-group-item text-muted text-center"

v-if=

"languages.length <= 0"

>
No data found
</

div

>
</

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 :)

Download

You must upgrade your account or reply in the thread to view hidden text.

Live Search using PHP and Vue.JS Tutorial

More options

Javierx

442,401

317,942

317,951