Live Search Result Powered By Javascript

Implementing Live Search Results

or Example
Someone Comes to our Websites
and they Know Exactly what they are
Looking For instead of using our linnk
we want them able to use our search Icons
up in the top right corner of our header

If someone interested in Biology

they just clicked the icon and just typed the word biolog

so that make sense but u might be thinking

but what does live search results means

what does the word live means in this context

to explain it lets look the opposites of live search reuslt

if you check the default twenty seventeen or any native theme of wordpress

you see the default search box if i am going to type biology

nothing will happened wither i press enter or click the search icon submit button

now the opposites of this behaviour is Live Search Result

live is just saying Real time or on the FLy or in the Moment
getting result couple of millisecons when i stop typing

live search result is as soon as i typed biology

may be just couple hundred milliseconds
after i typed the fina letter and pause for a sec
we just immediately we present with result t box
he search queries right beneath the search box
i backed space and typed in math

just a couple milliseconds just i stoped typing

we see the different search result right beneaththe box
without having to enter and submit the form icon button

right because the traditional way of searching

actually if i search for math i have to click the submit for

takes me to borwser entirely different url page pnly them i find the result
whihci may be i am looking for that search

but we only do this as a fallback later on the course

but for now we will be buildin glive search

whcih gives more user experience functionality

*********

so if someone click on the search icon at the top header of the menu bar
what we are going to do
a full screen semi transparent overlay
pop up lightbox text input field

the user can begin immediatley typing into

and within cuple hundred millicsconds after they sto typing

we can present search results in real time

*************************

so how can make this happened

php programming will not help in this case

initially php is great to outputting a page

that we want to load

but once the web brwoser has loded the page

if we want to make changes without completely refreshing the page

we need to use the javacript language

javascript is how we cna manipulate the page

in real time

so write now
so lets start writing javascript 3:21
***********************************

get into the javascript folder

open script.js file

verify that our javascript file is working

juat as a test go to the bottom of the file

create temporarily alert message

alert('This is a Javascript Test');

save the file

open our homepage
alert popup message not displayed

we write the code in thescript.js

because wordpress is loading bundled.js

so we need to bundled or compile this script.js file

lets write
alert("This is an alert box");
to update the script the above code we wrote

will live inside the bundled file that wordpress uses

this extra step of bundliung or compiling our javascript

breaking into individual module fiule

this is completely optional it has nothing to do with wordpress

its not necessary to set up javascript like this

i am doing this way because

i want this way to familiar with valuable skills as possible

and writing modular javascript like this is very imporatant to ;ot of

employers and developers team

however you can write the entires javascript code in one javascript file

for wordress dewvelopemt it is ok

and you may stay orgnaised avoiding
to bundled or compiling script file

*******************
but i follow the module way bundled style way
because it Industry Standard

so to compile lets jump into the command line tool

cd into the folder where your wordpress file lives

once you get into the location where 4 important lives

webpack.config gulp.js json settings.js package.json

once your command line poining towards the folder where this file lives

Either you run gulp script

to one time bundled for conpile of your javascript

or gulp watch
that will spin up local proxy preview server

of your website
and most importantl it wil watch your javascript file

for any saved changes

back to the script.js file where we wrote the alert message

if i saved this file again

the command line

will start bundling the file for me

the command we run

using a webpack it bundles up all individual javacript file

meaning listed file int a single file named script.bundled.js

if you look into this bundled file

its difficult to read all the

code as humans but easy for web browser

so goin to refresh the page we did see the
alert message pop up box with our custom text message

*******************************

now our jsvscript is up and runnning

delete the alert message instead

lets create a brand new sepearate module file

for our live search

lets create a new file in module search folder

thats live insdie the search folder

lets create a new file named search.js
name of the file doesnot matter
now we are going to
write object oriented javascript
profession way od doing thi si the professional damn World

so learning Object Oriented Modular Code

lets start by writing

the keyWord class

the name of the class

Search
you can named it whatever you want

followed by adding curly braces

and then in javascript whenever we create a class

we wanna be sure to include Constructor Function

so we just typed out constructor

special reserved keyword in javascript

followed by parenthesis()
which has its own curly brace

and any code we placed inside constructor function

will be executed as soon as we create an object

using our class or blueprint

a class is a recyable blue print

we can use to create an object

infact we can create multiple object using our class recipe

Live Search Functionlaity

lets try this code for example

inside the constructor method

lets create an alert message box
now lets pretend we have have create a class seacr
which is now ready to be used
for to create an object from this class

so lets import this file into the main script file

in the search down at the very bottom of this file
we can say

export default Search;

this line of code able to import this file into main script file

export default Serach

save this file

and back in the main scriptjs file

import search module by pointing out the path
where search file lives

import Search from './modules/Search

now we crerate a new object

first create a variable named it magicalSearch

an lets set is equal to

to create anew instance of a search class

A class is just a which you create a new instances

or new objects

as soon as i saved our command line automatically rebundled

and our preview proxy server automatically refresh

display search box

************************************
class Search {

constructor(){

alert("This is an search box");

export default Search;

var magicalSearch = new Search();

******************
so we create a new object

magicalSearch

Remember a class can be reused

if you create a another variable or another object

and also crreate an ew instance of a search class

var amazingSearch = new Search();

*******************

so what we done here is

we create a new blueprint a class
which reside in own file

once we import that file

we can create as many object for tha that class

***************************

however in reality for our websites we are going to create

need multiple search objects

code residing in the class doesnt get executed

unitl you create a object

thats uses the class a blueprint

so lets dlete the second search object

rename it to just simply search

naming doesnt matter

lets make one thing clear

if you are not using our modular setup

split javascript in to the mai file or a module file

importing all other java files

and comile with bundled js to get effect

**************
however if you are using skipping modular way

one big javascript file

all of your code in it

thefore delete the export or commented it out

create a variable down below

class Search {

constructor(){

alert("This is Daania search box");

var Search = new Search();

in modern web broswer wil work just fine

you create a class

you create a object that leverage the class

no need to bundled up or compiling proces to go through

you just literally

load this file in the web browser

but you have to go to functions.php file

instead of loading script,bundled.,js file

we will load search file

********************

powered the page to live search results

Opening and CLosing the Search Overlay
--------------------------------------------
someone click the search icon
we will respond with by opening up a full screen
semi trnasparent overlay

with a text field where user begin typing in what they are looking for
in order to respond to event of this icon to be clicked

we need to write a javascript

but before writing the javascript

lets first write HTML
which control the overlay should looks like

go to text editor
and theme folder
go to footer .php

lets go down very bottom

and right before the closing body tag

and above wp_footer line write above that

create brand new div

and give a class of search-overlay

and within that div lets some output some test text

<div class="search-overlay">

hello world 123

<div>
/
if we save that and refresh the page

we wont see anything

towards the bottom of the page

we dont see 123 test text

thats because i write the css class
which target this class
which hides this div
unless we give another class

<div class="search-overlay">
hello world 123
</div>

so Overlay is hidden by default

but if we add this class search-overlay--active
our text will be visble

<div class="search-overlay search-overlay--active">

hello world 123
</div>

now you can see semitransaprent overlay

and you see you test text hello world 123

so lets search overlay be hidden by default

and add class search-overlay--active to it

dynamically with Javascript

Once someone click the search icon

we can then use javascript

to add this secondary class in a real time
which is search-overlay--active

and once someone has

full screen transparent overlay visible

and we will give them option to close it

to get back to the regular back to the page

in the overlay instead of writing helloworld 123

lets add atext field where user can type in

what they searching for

and also
add X icon for user to click on to close the eoverlay

div class="search-overlay under score under score top

and one more div with a class of container

lets add another div and give a class of search-overlay__top

and anything living within this div
lets creat another div with a class of conatiner

and now within this contaner div

<div class="container">
and anthing living wihtin div
horizontally centered on the screen

within this container div

lets first create a text field
<input type="text"

and just for css styling let gives a

class= of "search-term"

and why we give a default value

placeholder="What are you looking for?"

so first you see the field it alreadys

What are you looking for?

and give this input a unique id of

id="search-term">

later on we can have a unique hook

to look for our javascript

save it

****************

lets check

<div class="search-overlay search-overlay--active">

<div class="search-overlay__top">
<div class="container">
<input type="text" class="search-term" placeholder="What are you looking
for?" id="search-term">
<id="search-term">
</div>
</div>
</div>

i create a overlay screen overlay

with slightly deifferent colors
and a placeholder text and if you click on it
you can start typing on it

next lets add a large search icon and large close icon
opposites to each other at of the overalay
before the input create an i element
from the font awesome library
<i></i>--This is how you create an icon
since we are using font-awesome library

lets use a class of fa for font awwesome

this will put in font awesome magnifying search icon

and give anaother class of fa-search

and lets give another class for right color and right positioning
search overlay underscore underscore icon

search-overlay__icon

and whenever you create a fontawesome icon

you also add another attribute

instead of class name

named aria-hidden="true"

so this will if comes to our wrbsites

and they dont have perfect vision and they are
using a screen reader it will not try to read this elemnt

out loud to that visiotr

<i class="fa fa-search search-overlay__icon"

aria-hidden="true"></i>

Cool

we have a search icon

now we add close icon

copy the search elemnt code

and right below the input elemnt
and mades ome change to it instead of
fa fa-search we will use fa fa-window-close

search-overlay__icon to search-overlay__close

****Full Code Here***********

<div class="search-overlay search-overlay--active ">

<div class="search-overlay__top">
<div class="container">
 <i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>
<input type="text" class="search-term" placeholder="What are you looking
for?" id="search-term">
<i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i>
</div>
</div>
</div>

****************************************

At the moment if we click the close icon nothng happens

we are right now dealing with boring html

but you can imagine if we use javascript

so when you click this close icon

we remove this active class ie search-overlay--active

from search overlay so its becomes invisible again

right now we have basci html skeleton complete

lets go ahead and delete

active class search-overlay--active class

so the search will be in visible by default onpage load

now lets start writing javascript

opening and closing of overlay dynamic

********************************************************

theme folder look inside js folder

amd then the module sub folder

and lets open search.js

search.js 6:52

*****************************-
how do i approach object oriented javascript

i like to break into three main sections

or three main area
constructor function is area number 1

leta add a comment to get organised

or notes to our selves computer wont actually run

describe and create/initiate our object

so Constructor is section number 1

and then right below the Constructor Function

we have Section or Area No 2

and this is place where i list all my different Events

so in this example of an events

is when top right search icon is clicked on
or the search overlay big X or close icon is clicked on
so each of those are events
so we have to build code to respond each of these evnets

section 3

where our method lives

A method is just an another way of saying

a Function or method or action

Think Methods as Verb or action word

before we going to write real code

First we Write a Skleton Method

as we know our search overlay open and reveals itself

and also need to close down or hide itself

************************************1

class Search {
//Sec1.describe and create/initiate our object
constructor(){

alert("This is Daania search box");

}
//2. events

//3. methods (function , events...)

*****************************2
so why we not create or method or function named

openOverlay and write below that we write closeOverlay

now we are creating search object

but if you imagein a person objector Human Being Object

The action that human being can perform will live inside here
run jump walk speak

and to continued with that metaphor of creating human being object

the constructo we defined th e

person name person eyes color

so instead of here alert test messages in the conastructo function

we here define the properties of th e object

so we refer to this.and go inside with the period

and we can create properties we want

this.nam='jane';
this.eyecolor='green'

this.head={} # create some sorts of elements objects required to create human head

this.brain={}#create some sorts of elements objects required to create human brains

so the constructor is where you describe and

give birt to the object
with having its propertie

and the events where you connect the dot between

objects and different action that they can perform

so example for an event

not in programming code
in the plain english on the event
we write this.head feels cold,
so action required by writing method namea is wearHat
so we write mertod is

wearsHat(){

so the events is the dispatcher maybe the head

someone feels cold
you rspond by putting on a hat

//on this.brain feels hot goingwsim

so in dispatch area we use going swimiing

goingSwiming(){

***************now we we go back to the real metaphor

we should respond to the event i fsomone click th esearch icon

lets delete human pewrson metaphor code

lets start by selecting a icon leemnt

so inside th econstructor
this. giving a property name openButton =
and we just point towards this search elemnt
now selecting an elemne tin javascript is simple enough
but we actually leverage the name jquiery to make it easier

so ifw e want to use jquery libraray

so up in the very top of the file write

import $ from 'jquery';

this is want oyu need to use jwuey code

how to load jquery in wordpress official way

go to functions.php

and you just want to tell wordpress to load jquery

go to the where you use enqueue hooks where we load our javascripts file

here we are loading in our bundled file

or anyother file where oyu want

but the jey here is dependency argument

So i here set to null

my script deoesnt depend on anything else

but if you want to load jweury you replade null

with arrray (isnide the array write enclosed the word 'jquery')

wordpress will take care attaching

attaching jquery javascript libraray for you

but for modular bundled setup you do not have to that

leave sets it to NULL

so back to ur sript file we have to target or selct top right search icon

so $ sign to begin using jquery

parenthesis quotes

and then we use css like selectors

meaning a dot for a class

or a hastag for an ID

as we check in css stylsheet file that search icon has a class of

.js.search-trigger

lets drop down to new line

and lets select th eclose iccon

whcih exist in the search overlay

this. name of the porpert whatever we want
lets closed it closed button

using jquey $

.on("click", this.openOverlay.bind(this));
this.closeButton.on("click", this.closeOverlay.bind(this));

class Search {
//Sec1.describe and create/initiate our object
constructor(){

alert("This is Daania search box");

//2. events
events() {
this.openButton.on("click", this.openOverlay.bind(this));
this.closeButton.on("click", this.closeOverlay.bind(this));
}

//3. methods (function , events...)

openOverlay() {
this.searchOverlay.addClass("search-overlay--active");
}

closeOverlay() {
this.searchOverlay.removeClass("search-overlay--active");
}
}
}
class Search {
// 1. describe and create/initiate our object
constructor() {
this.openButton = $(".js-search-trigger");
this.closeButton = $(".search-overlay__close");
this.searchOverlay = $(".search-overlay");
this.events();
}

// 2. events
events() {
this.openButton.on("click", this.openOverlay.bind(this));
this.closeButton.on("click", this.closeOverlay.bind(this));
}

// 3. methods (function, action...)

openOverlay() {
this.searchOverlay.addClass("search-overlay--active");
}

closeOverlay() {
this.searchOverlay.removeClass("search-overlay--active");
}
}

export default Search;