Forum
Calling search function to a section in home page
Hi all ,
im trying to implement the search functionality on the home page (which has 4 regions in total) . The design has been made in such a way that the search bar sits in the html of 1 section .
<!-- =================================== Section - Video Section ================================= -->
<div class="row">
<div class="jumbotron jumbotron-fluid w-100 d-flex align-items-center bg-transparent" style="height:100vh;background-color:black">
<img src="<perch:content id="BackgroundImage" type="image" label="BackgroundImage">" style="position: absolute;width:104%;height:140%;top:0%;z-index: -1" class="hidden-md"/>
<video id="video" class="hidden-sm" style="object-fit: cover;z-index:-1;position: absolute;top:0%" autoplay playsinline muted>
<!-- Default video source: -->
<source type="video/mp4" src="<perch:content id="BackgroundVideo" type="file" label="BackgroundVideo">">
</video>
<div class="container text-center" style="margin-top:-5rem">
<h1 class="display-4 text-white ">
<perch:content id="heading" type="textarea" label="Heading" required title markdown editor="simplemde">
</h1>
<!-- =================================== To Be Replaced With Search Function ================================= -->
<div class="input-group my-5 px-5 d-none d-md-flex">
<div class="input-group-prepend shadow-lg" style="border-radius: 0px 0px 0px 20px ">
<button class="btn bg-grey px-5 text-black shadow" type="button" style="border-radius: 20px 0px 0px 0px ">
<p style="margin:0;" class="w-100 text-center"><i class="fas fa-search-location"></i></p>
</button>
</div>
<input id="tags" type="text" class="form-control py-4 pl-4 shadow-lg" placeholder="Enter your search location" aria-label="" aria-describedby="basic-addon1" style="border:none;">
<div class="input-group-append">
<select class="btn px-4 shadow-lg bg-grey" style="padding-right: 40px !important;">
<option value="volvo">Buy</option>
<option value="saab">Rent</option>
<option value="opel">Sale</option>
<option value="audi">Lease</option>
</select>
</div>
<div class="input-group-append">
<select class="btn px-5 shadow-lg bg-grey" style="border-bottom-right-radius: 20px;padding-left:15px !important">
<option value="Choose Range">Choose Range</option>
<option value="volvo">AED 1,000 - AED 5,000</option>
<option value="saab">AED 5,000 - AED 10,000</option>
<option value="opel">AED 10,000 - AED 20,000 </option>
<option value="audi">AED 20,000 - AED 30,000</option>
</select>
</div>
</div>
<!-- =================================== To Be Replaced With Search Function ================================= -->
</div>
</div>
</div>
<!-- =================================== Section End - Video Section ================================= -->
How do i call the search function to an HTML template ?
Are you wanting to Filter the region or add a search for the entire page?
https://docs.grabaperch.com/functions/search/
Perch comes complete with an example search page in the root of the download folder called search.php.
Also in the Perch download is a template in perch/templates/search. This template has all of the search template fields in it, including paging and can be used as is or you can edit the mark-up as with any Perch template.
https://docs.grabaperch.com/functions/search/perch-content-search/
hi robert ,
The html i mentioned on top is one of the templates for the home page region .
For eg , right now i have 4 regions in my home page .
Region 1 Region 2 Region 3 Region 4
the template mentioned above is being used on region 1 . if you look close at the code , the search bar (html) .
My problem over here is how do i call the search bar functionality on to the template mentioned above ? if i go ahead and call the php function onto an html template (for a region) , its not gonna work out .
so my homepage.php is made up of 4 regions of which 1 region has the search bar .
I’m sorry. Titus, I am totally lost on this one. Hang in there cause more help will come soon.