Empty search box

[Eriaku]

Hi guys, i have the search box ready to do but its not working, here is you can check it out :

    <!-- begin search box -->
    <div class="box">
      <h2>صندوق البحث</h2>
      <form action="#ads">
        <input type="text" name="s" id="s" value="" />
        <button type="submit">اذهب</button>
      </form>
    </div>
    <!-- end search box -->

Pretend that my website is http://www.css-tricks.com

Thank you (f)

[__]

“not working” is a useless statement:
it means nothing on its own.

http://codepen.io/adrian-enspired/pen/rHLgB

…nothing unexpected there. Describe your problem in specific terms. What are you trying to accomplish?

[Eriaku]

Well, the thing is when i go to my website and write something in the search box to search for it, after clicking OKAY .. nothing happens, this is why i thought that it’s not working ..
Can you please tell if there is something wrong with the code ?

[Paulie_D]

Well, the thing is when i go to my website and write something in the search box to search for it, after clicking OKAY .. nothing happens

You know these boxes don’t work automatically…..right?

You have to use javascript to tell them too do something.

[Eriaku]

Sorry but i don’t have any javascript files in my website files, all i have is some html pages and two css files with a folder that has all the images, is something wrong with these files ?
How about the javascript and how i can have it ?
I appreciate your help

[Paulie_D]

How about the javascript and how i can have it ?

Google is your friend here. – https://www.google.com/cse/

We’re not a code writing site.

[__]

Typically, a search box is nothing more than a form with a text input. In order to do anything, that form must be submitted to your (a) server, which must then perform the search and return the results. It is not a “simple” process, and it will depend entirely on how your particular site is designed and run.

Especially since you currently have no server-side scripting for your site, you might be interested in using google’s site search service instead.

edit – Paulie_D beat me to it. : )

[Eriaku]

Thank you so much for your feedback, i tried the one of google and it was a little bit confusing, and now, i need your help to match between google search code and my code, here we go :
Google code :
<script>
(function() {
var cx = '000954822679884360703:to7re88yauo';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
<code></code>

My code :
<!-- begin search box -->
<div class="box">
<h2>صندوق البحث</h2>
<form action="#ads">
<input type="text" name="s" id="s" value="" />
<button type="submit">اذهب</button>
</form>
</div>
<!-- end search box -->
<code></code>

Thank you guy’s

[Eriaku]

Guy’s, if this is not possible then just tell me and will be fine, and i apologize for the leak of knowledge that i have about this whole concept

[__]

This might be the answer you’re looking for.

Have you seen Google’s getting started guide?

[Eriaku]

Hi, yeah ive seen the getting started guide but it did not help me much ..
what im asking is, i want to keep the search box design of my website and put inside it the script from google CSE, is it possible ?

This one from my website :

    <!-- begin search box -->
      <div class="box">        
      <h2>صندوق البحث</h2>
      <form action="#ads">
        <input type="text" name="s" id="s" value="" />
        <button type="submit">اذهب</button>
      </form>
    </div>
    <!-- end search box -->

And this one from google :

<script>
  (function() {
    var cx = '000954822679884360703:to7re88yauo';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

[__]

The gcse script builds a search box based on the options (including design/ theme) you choose. You might be able to do some limited customization from your end, but you can’t change the way their script works.

What does the gcse box look like? is it really so bad that it’s unusable? even with what customizations it offers?

[Eriaku]

Yeah i mean it’s not the the theme of my website, its different, then the google cse search box when you write its too small, it’s not large enough for like two or tree words !
this is why i want to keep my search box design, and change it mechanism into google cse, so that’s my question guy’s
I’m really having a hard time this this thing to get solved

[__]

You cannot use your form. GCSE generates its own form. However, I’ve seen Google search boxes on various website with all kinds of styling applied. Have you tried simply applying the CSS for your original form to the form GCSE generates?

[Eriaku]

No i did not, i do not know how ..

[Author]

Posts