在我的网站上自动搜索 Google 搜索结果答案

【问题标题】：Auto Google Search Results On My Website在我的网站上自动搜索 Google 搜索结果
【发布时间】：2013-02-10 14:10:06
【问题描述】：

我正在创建website。当您单击我的搜索框并键入时，您单击搜索，然后它会将您带到带有搜索结果的 google.com，当您键入时，我将如何使用 ajax 在框架中显示结果？当您在 http://google.com 上搜索您的文本时类型自行显示结果而不按搜索我该怎么做？这是我的 html sn-p

<div class='search'>
<form method="get" id='search' action="http://www.google.com/search">
<input type="hidden" name="q" size="31" maxlength="255" value="Site Name:" />
<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" placeholder="Search..." />
</div>

我在它后面有很多 css 来使文本框放大和改变颜色。这是 sn-p 以防万一。

#search input[type="text"] {
background: url(imgs/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2)   inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
outline: none;
}

#search input[type="text"]:focus {
background: url(imgs/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 175px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
outline: none;
}
div.search
{
position:fixed;
top:8px;
right:5px;
}

那么我将如何制作一个在您键入时显示谷歌搜索结果的 ajax 框架？我对ajax一无所知，我不知道如何用它开始一行代码，所以请深入解释

*旁注抱歉，如果网站看起来很糟糕，我 13

【问题讨论】：

标签： javascript html ajax jquery

【解决方案1】：

如果你不了解 JavaScript，你会被卡住，我建议你先学习它。 w3schools.com 会是个好地方。

Google 不再允许您通过 iframe 使用他们的网站，因此我建议您使用 startpage.com，因为他们的结果来自 google.com

我能想到的最简单的方法是这样的（在这个例子中，我使用网站的移动版本，因为它嵌入得更好。）：http://jsfiddle.net/A8M4r/

<!DOCTYPE html>
<html>
<head>
<script>
function querify(query) {
    return query.split(" ").join("+") // replaces spaces with +s for url
}
function updateIframe(query) {
    query = querify(query);
    var i = document.getElementById("searchResults");
    var searchEngine = "http://startpage.com/do/m/mobilesearch/?q=" 
    var yourSiteToSearch= "site:example.com+"
    i.src = searchEngine + yourSiteToSearch + query;
}
</script>
</head>
<body>
   <input oninput="updateIframe(this.value)" type="text">
   <iframe id="searchResults" height="100%" width="100%">
</body>

希望这会有所帮助！

附：如果您希望 iframe 仅在用户单击搜索框时弹出，这里有一个：jsfiddle.net/4EDUK

【讨论】：

非常感谢我更新了它如何让 iframe 仅在单击文本框时显示？
哦，您可能希望将您的网站提交给 google 以供他们编制索引，但看起来他们还没有。 google.com/webmasters/tools/submit-url
@user1978141，澄清一下，我给你的链接在点击时不会显示 iframe，而是在用户在搜索框中输入内容时显示。
是的，我知道在单击文本框之前如何隐藏框架？你让我实现了一半的目标
@user1978141 糟糕！对不起，那是错误的链接。等一下。

【解决方案2】：

$(window).load(function()
{
    var opts = 
    {
       url: "http://www.google.com/search?q=" + $("#mysearchInput").val(),
       success: function(data)
       {
           //parse the results which are in variable "data". 
           //You're going to need to analyze the results yourself
           //and parse it yourself, in whatever way you want to

           var myresults = "my example results here";
           $("#myiframe").append(myresults);
       }
    }

    $.ajax(opts);
});

【讨论】：

如何在我的代码中使用它，就像我上面说的我不知道它是如何工作的，我只知道 html css 和 php。我应该把它放在哪里，我该怎么做才能让它按我想要的方式工作
在stackoverflow.com/questions/14793160/… 上查看我对您重复问题的回复。它包括所有 HTML、CSS、jQuery、PHP 等。您需要按照您的描述进行操作。
@htmled 我正在删除我使用该网站的那个问题，但仍然无法弄清楚。
如果没有人根据您网站的特定需求编写代码，那么您可能会得到最接近的结果。这种类型的功能涉及很多，而不仅仅是 jQuery。
没有确切的需要，我只想使用我的文本框进行搜索并将结果显示在 iframe 或 iframe 之类的选项卡中。

【解决方案3】：

如果您想在 jQuery 中自定义自动完成功能，您可以使用 jQuery Autocomplete 之类的方法，您必须使用数组或远程文件定义自动完成值。

Else Google 自定义搜索使您能够通过带有 Google 提供的属性参数的搜索框使用自动完成功能。这是一个可以帮助您的网页 - http://www.theblog.ca/autocomplete-google-custom-search-input-field

【讨论】：