使用Jquery获取多个关键字的前5个Google搜索结果

时间:2017-08-04 10:30:03

标签: jquery google-api

大家好,

我的要求就像会有一个搜索框,在该搜索框中我将以逗号分隔输入多个搜索,然后我将按回车键。所以现在对于每个关键字,我想获得前5个谷歌搜索结果网址,我需要将其保存在文本文件中。请检查此

这是我的代码:

   <form action="http://www.google.com/search" method="get">
  <!-- HTML5 SEARCH BOX!  -->
  <input type="search" id="search-box" name="q" results="5" placeholder="Search..." autocomplete="on" />
  <!-- SEARCH davidwalsh.name ONLY! -->
  <input type="hidden" name="sitesearch" value="new" />
  <!-- SEARCH BUTTON -->
  <input id="search-submit" type="submit" value="Search" />
</form>

<!-- ASYNCHRONOUSLY LOAD THE AJAX SEARCH API;  MOOTOOLS TOO! -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=""">

  google.load('mootools','1.2.4');
  google.load('search','1');

  window.addEvent('domready',function(){

  /* search */
  var searchBox = $('search-box'), searchLoaded=false, searchFn = function() {

    /*
      We're lazyloading all of the search stuff.
      After all, why create elements, add listeners, etc. if the user never gets there?
    */
    if(!searchLoaded) {
      searchLoaded = true; //set searchLoaded to "true"; no more loading!

      //build elements!
      var container = new Element('div',{ id: 'search-results' }).inject($('search-area'),'after');
      var wrapper = new Element('div',{
        styles: {
          position: 'relative'
        }
      }).inject(container);
      new Element('div',{ id: 'search-results-pointer' }).inject(wrapper);
      var contentContainer = new Element('div',{ id: 'search-results-content' }).inject(wrapper);
      var closer = new Element('a', {
        href: 'javascript:;',
        text: 'Close',
        styles: {
          position: 'absolute', //position the "Close" link
          bottom: 35,
          right: 20
        },
        events: {
          click: function() {
            container.fade(0);
          }
        }
      }).inject(wrapper);

      //google interaction
      var search = new google.search.WebSearch(),
        control = new google.search.SearchControl(),
        options = new google.search.DrawOptions();

      //set google options
      options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
      options.setInput(searchBox);

      //set search options
      search.setUserDefinedClassSuffix('siteSearch');
      search.setSiteRestriction('davidwalsh.name');
      search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

      //set search controls
      control.addSearcher(search);
      control.draw(contentContainer,options);
      control.setNoResultsString('No results were found.');

      //add listeners to search box
      searchBox.addEvents({
        keyup: function(e) {
          if(searchBox.value && searchBox.value != searchBox.get('placeholder')) {
            container.fade(0.9);
            control.execute(searchBox.value);
          }
          else {
            container.fade(0);
          }
        }
      });
      searchBox.removeEvent('focus',searchFn);
    }
  };
  searchBox.addEvent('focus',searchFn);
});
</script>

<style>
/* results positioning */
#search-results   { position:absolute; z-index:90; top:40px; right:10px; visibility:hidden; }
/* triangle! */
#search-results-pointer { width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #eee; margin-left:80%; }
/* content DIV which holds search results! */
#search-results-content { position:relative; padding:20px; background:#fff; border:3px solid #eee; width:380px; min-height:200px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) }
</style>

0 个答案:

没有答案