Geek Answers Handbook

Google Custom Search in View

I would like to customize my search form. I use the Google search service and bind it to my domain, etc.

I chose the location of the two columns in the control panel, but, nevertheless, I want to do something in the form.

So I tried to put the actionlistener in jQuery on the form, however it does not work.

Then I thought that google, of course, provides something for this. And yes, yes. It is called:

setOnSubmitCallback()

http://code.google.com/apis/websearch/docs/reference.html

Unfortunately I do not understand.

So far I:

 google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST}); function initialize() { var searchControl = new google.search.CustomSearchControl('017998360718714977594:j6sbtr-d6x8'); searchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); var options = new google.search.DrawOptions(); options.setSearchFormRoot('cse-search-form'); searchControl.draw('cse', options); } google.setOnLoadCallback(initialize);

So I have two divs: #cse-search-form for the form and #cse for the results

#cse is in another div #searchResults, which is hidden, and here it is:

I want to open #searchResults in a dialog from jQuery UI.

 $("#searchResults").dialog( { minWidth: 750, minHeight: 750 } );

This will lead to:

 .setOnSubmitCallback(function() { $("#searchResults").dialog( { minWidth: 750, minHeight: 750 } ); } );

So my problem is where and what do I need to set setOnSubmitCallback on?

I cannot put it in google.search.Search or CustomSearchControl, as indicated in the documentation. And I cannot call it in onLoadCallback, so this is very strange for me. Cannt figure out how to do this.

I hope someone has more experience with Google searches and can help me with the solution.

Thank you in advance.

+7
source share
1 answer

NOTE. The code below uses what Google is out of date. Use this instead: http://code.google.com/apis/customsearch/v1/overview.html

 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Hello World - Google Web Search API Sample</title> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> <script src="https://www.google.com/jsapi" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> //<![CDATA[ google.load('search', '1'); google.load("jquery", "1.5.2"); google.load("jqueryui", "1.8.12"); function OnLoad() { var searchComplete = function(searchControl, searcher){ $('#searchResults').dialog({modal: true, width: 700, height: 400, position: [50, 50]}); for (result in searcher.results) { var content = searcher.results[result].content; var title = searcher.results[result].title; var url = searcher.results[result].url; $('#searchResults ul') .append($('<li></li>') .append($('<a/>').attr('href', url).text(title)) .append($('<p/>').text(content))); } }; // called on form submit newSearch = function(form) { if (form.input.value) { // Create a search control var searchControl = new google.search.SearchControl(); // Add in a set of searchers searchControl.addSearcher(new google.search.WebSearch()); searchControl.addSearcher(new google.search.VideoSearch()); // tell the searchControl to draw itself (without this, the searchComplete won't get called - I'm not sure why) searchControl.draw(); searchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF); searchControl.setSearchCompleteCallback(this, searchComplete); searchControl.execute(form.input.value); } return false; } // create a search form without a clear button // bind form submission to my custom code var container = document.getElementById("searchFormContainer"); this.searchForm = new google.search.SearchForm(false, container); this.searchForm.setOnSubmitCallback(this, newSearch); } google.setOnLoadCallback(OnLoad); //]]> </script> </head> <body> <div id="searchFormContainer">Loading</div> <div id="searchResults" title="Search Results"> <ul></ul> </div> </body> </html>
+4
source

More articles:


All Articles