Member Avatar for aa26i

Hi there,


I bought a template (no.11613) from template monster and I need to work that search button to search inside for my site content or search google. Most importantly i don't want to change the look of that search area in template. By clicking search, should appear a text box for search and after entering the results show inside the template main body, not on another separate webpage. google is providing site contect search service but the search results appear on another page which is not my template.

For reference one can check the link of the template. I am using html version of that template.

here is the whole code of search table

<table cellpadding="0" cellspacing="0" border="0" width="100%">
     <tr>
        <td><a href="#"><img src="logo.png" alt="" style="margin:37px 0px 0px 38px;"></a></td>
        <td><img src="spacer.gif" width="325" height="1" alt=""></td>
        <td width="100%" style="padding:39px 0px 0px 0px; "><i><b><a href="#">search</a></b> &nbsp; | &nbsp; <b><a href="#">register</a></b> &nbsp; | &nbsp; <b><a href="#">sitemap</a></b></i></td>
     </tr>
</table>

anybody help me on that.

thanx in advance

Edited by aa26i because: mistake
  • 2 Contributors
  • 3 Replies
  • 117 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by aa26i

Dani AI

Generated

Short answer for : use the search provider's embeddable element so the query box lives in the header and the results render inside your page. That keeps the template look and avoids a separate results page. pointed you in the right direction — below are practical steps and small snippets to plug into an HTML template version.

Place the provider script once (replace YOUR_CX with the engine id you get from the provider), put a hidden search-box element in your header, and put a results-only element where your main body content goes:

<script async src="https://cse.google.com/cse.js?cx=YOUR_CX"></script>

<div id="header-search" style="display:none;">
  <div class="gcse-searchbox-only"></div>
</div>

<div id="main-results">
  <div class="gcse-searchresults-only"></div>
</div>

Make the header “search” link toggle that hidden box and focus the input so it appears exactly where you want without changing styles:

document.getElementById('search-link').addEventListener('click', function(e){
  e.preventDefault();
  var box = document.getElementById('header-search');
  box.style.display = (box.style.display === 'none') ? 'block' : 'none';
  setTimeout(function(){
    var input = box.querySelector('input[type="text"]');
    if (input) input.focus();
  }, 120);
});

Notes and cautions: the embeddable element injects markup that you can style to match your template, but some classes are generated by the provider. If you need pixel-perfect control, use the provider’s JSON API (requires an API key and has usage limits) and render results yourself. Also provide a non-JS fallback form if the site must work without scripts. Test on an actual web server (some provider scripts behave differently on file://).

Recommended Answers

All 3 Replies

Member Avatar for floatingDivs

I'm assuming you are using Google Custom Search.

If so, there's an option to receive results "inside" the current page.

Member Avatar for aa26i

I'm assuming you are using Google Custom Search.

If so, there's an option to receive results "inside" the current page.

Ok. How to do that according to the codes given above. and what have to input in the body tags. sorry not gud at web designing or so.

Member Avatar for aa26i

So nobody knows how to do that? Because this forum is awesome and so helpful and that's why its impossible that people here can't solve my issue.

Come on guys, give me some attention here too .. Plz

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.