Forum

Thread tagged as: Question

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 ?

Titus Saju

Titus Saju 0 points

  • 2 years ago

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.