Multiple Google Custom Search Engines on the same page don't work

Binary Turf » Tech support

  1. Administrator

    Key Master

    { #1 — 2 years ago }

    The default code that is copied and pasted has common variables which conflict. For eg.

    <div id="cse2" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function(){
var mycse = new google.search.CustomSearchControl('004628715705749745172:m46tuqhx-vc');
mycse.setResultSetSize(google.search.Search.SMALL_RESULTSET);
mycse.draw('cse2');
}, true);
</script>

    In this example the custom search variable has been renamed to 'mycse' which will not conflict with the other search engine. Additionally the search box will be drawn into the div id 'cse2'

  2. pandawebbie

    Member

    { #2 — 1 year ago }

    Thank you - this great helps greatly. One thing I can't figure out though: if I just want a search form in my header, and then another one in the actual body content, what do I do? I copied the above code into the header portion, but not only is the search input form there, but the results. I want to make the results show up in the main "cse" div, not in the cse2 div.

    Any thoughts on this either?

    Would love a solution and will be very grateful!!

    Thank you very much,
    pandawebbie

  3. Administrator

    Key Master

    { #3 — 1 year ago }

    That requires you to select the two column option under Look & Feel in google CSE control panel.

  4. pandawebbie

    Member

    { #4 — 1 year ago }

    Hello again - do you have (or know of that you could please point me to) any working code examples where there are two search controls (and therefore two input boxes) that display results in the same div?

    (right now the way I have it - I can get the first input box to display results, but even when I use the above code and rename the divs so that the variables don't conflict, the 2nd input box doesn't work).

    Thank you, again!

  5. pandawebbie

    Member

    { #5 — 1 year ago }

    Here is my code:

    <!-- Google Custom Search Element #1 -->
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">google.load('search', '1');
    google.setOnLoadCallback(function(){var cse = new google.search.CustomSearchControl('003443374396369277624:okawqyqe_va');
    cse.draw('cse_results');}, true);
    </script>

    <!-- Google Custom Search Element #2 -->
    <div id="cse2" style="width:100%;">Loading 2nd search box...</div>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">google.load('search', '1');
    google.setOnLoadCallback(function(){var cse2 = new google.search.CustomSearchControl('003443374396369277624:okawqyqe_va');
    cse2.draw('cse_results');}, true);
    </script>

    <!-- Google CSE Results -->
    <div id="cse_results">
    Loading...
    </div>

  6. pandawebbie

    Member

    { #6 — 1 year ago }

    Is it possible to have one CSE element "draw" two input boxes?

    Thanks again everyone!

  7. Administrator

    Key Master

    { #7 — 1 year ago }

    I doubt if you ca do it. However for the code part, change

    cse2.draw('cse_results');}, true);
    cse2.draw('cse2_results');}, true);

    and the div should be named 'cse2_results'.
    'cse_results'' is already in use by the first box.

Reply

You must log in to post.