Question

我有一段代码使用Google自动填充API为用户提供搜索建议。它在单独的HTML文件上运行良好。但是当我在我的网站上实现它时，它没有用。请帮助我如何在我的网站上实现它。

(function ($) {
$.fn.googleSuggest = function(opts){
  opts = $.extend({service: 'web', secure: false}, opts);

  var services = {
    youtube: { client: 'youtube', ds: 'yt' },
    books: { client: 'books', ds: 'bo' },
    products: { client: 'products-cc', ds: 'sh' },
    news: { client: 'news-cc', ds: 'n' },
    images: { client: 'img', ds: 'i' },
    web: { client: 'hp', ds: '' },
    recipes: { client: 'hp', ds: 'r' }
  }, service = services[opts.service], span = $('<span>');

  opts.source = function(request, response){
    $.ajax({
      url: 'http'+(opts.secure?'s':'')+'://clients1.google.com/complete/search',
      dataType: 'jsonp',
      data: {
        q: request.term,
        nolabels: 't',
        client: service.client,
        ds: service.ds
      },
      success: function(data) {
        response($.map(data[1], function(item){
          return { value: span.html(item[0]).text() };
        }));
      }
    });
  };

  return this.each(function(){
    $(this).autocomplete(opts);
  });
}
}(jQuery));

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet"/>
<style>
input{font-size:1.3em;}
#log{position: absolute; top: 10px; right: 10px;}
span{color:blue; text-decoration: underline; cursor: pointer;}
</style>
</head>
<body>
<div id="inputs"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.googleSuggest.js" type="text/javascript"></script>
<script>
$.each("web youtube recipes products news images books".split(" "), function(i, v){
  var div = $("<div>").appendTo("#inputs")
    , input = $("<input>").appendTo(div)
    , span = $("<label>").text(v).appendTo(div);
  input.googleSuggest({ service: v });
});
</script>
</body>
</html>

Answer 1

你在下面有这一行。这并不能解决任何问题。

<script src="jquery.googleSuggest.js" type="text/javascript"></script>

我用这个替换了它。

<script src="https://rawgit.com/haochi/jquery.googleSuggest/master/jquery.googleSuggest.js" type="text/javascript"></script>

这是改变的工作示例。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet"/>
<style>

input{font-size:1.3em;}

#log{position: absolute; top: 10px; right: 10px;}
span{color:blue; text-decoration: underline; cursor: pointer;}
</style>
</head>
<body>
<div id="inputs"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/haochi/jquery.googleSuggest/master/jquery.googleSuggest.js" type="text/javascript"></script>
<script>
$.each("web youtube recipes products news images books".split(" "), function(i, v){
  var div = $("<div>").appendTo("#inputs")
    , input = $("<input>").appendTo(div)
    , span = $("<label>").text(v).appendTo(div);
  $(input).googleSuggest({ service: v });
});

(function ($) {
$.fn.googleSuggest = function(opts){
  opts = $.extend({service: 'web', secure: false}, opts);

  var services = {
    youtube: { client: 'youtube', ds: 'yt' },
    books: { client: 'books', ds: 'bo' },
    products: { client: 'products-cc', ds: 'sh' },
    news: { client: 'news-cc', ds: 'n' },
    images: { client: 'img', ds: 'i' },
    web: { client: 'hp', ds: '' },
    recipes: { client: 'hp', ds: 'r' }
  }, service = services[opts.service], span = $('<span>');


  opts.source = function(request, response){
    $.ajax({
      url: 'http'+(opts.secure?'s':'')+'://clients1.google.com/complete/search',
      dataType: 'jsonp',
      data: {
        q: request.term,
        nolabels: 't',
        client: service.client,
        ds: service.ds
      },
      success: function(data) {
        response($.map(data[1], function(item){
          return { value: span.html(item[0]).text() };
        }));
      }
    });  
  };

  return this.each(function(){
    $(this).autocomplete(opts);
  });
}
}(jQuery));
</script>
</body>
</html>

HTML和JS自动完成无法正常工作

1 个答案: