在我的网站上自动谷歌搜索结果
Auto Google Search Results On My Website
我正在做一个网站。当你点击我的搜索框并键入你点击的搜索,然后它会带你进入谷歌网站并显示搜索结果时,我该如何使用ajax在你键入时在框架中显示结果?。当你搜索http://google.com你键入的文本在不按搜索的情况下自行显示结果,我该怎么做?这是我的html片段
<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,可以使文本框放大并更改颜色。以下是片段,以防与之相关。
#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一无所知,我不知道如何用它开始一行代码,所以请深入解释
*旁注抱歉,如果网站看起来不好im 13
在不了解JavaScript的情况下,我建议您先学习它。w3schools.com将是一个好地方。
谷歌不再允许你通过iframe使用他们的网站,所以我建议你使用startpage.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
$(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);
});
如果您想要在jQuery中自定义自动完成,您可以使用类似jQuery自动完成的方法,其中您必须使用数组或远程文件定义自动完成值。
另外,谷歌自定义搜索使您能够通过谷歌提供的属性参数搜索框使用自动完成功能。这是一个网页,可以帮助你做到这一点-http://www.theblog.ca/autocomplete-google-custom-search-input-field
- 使用谷歌搜索网址
- 与网络界面相比,谷歌搜索API有时会重复第一个结果,有时会重复第二个结果
- 如何获取显示在谷歌搜索右侧的图像链接
- 谷歌搜索API-“;没有结果”;文本
- 在javascript中调用自定义谷歌搜索标签时出现问题
- 谷歌搜索结果在iframe中
- 如何获得谷歌搜索结果?最好是Json
- 自定义谷歌搜索不会返回任何结果
- 解析谷歌搜索结果的Chrome扩展
- 为什么waitForKeyElements需要再次暂停谷歌搜索结果
- 如何在谷歌搜索结果中突出显示特定域
- 谷歌搜索附近的API没有给出观光的结果,为什么?
- 为什么当我在地址栏中键入新的搜索结果,然后Chrome导航到谷歌页面结果时,它会更改tabId
- Node.js NPM谷歌搜索结果返回[Object Object]作为结果
- 如何设计谷歌搜索像结果片段
- 如何在内容脚本中修改谷歌搜索结果页面
- 在谷歌搜索结果中添加文本
- 在我的网站上自动谷歌搜索结果
- 多词谷歌搜索没有返回结果
- 如何获取谷歌搜索结果的间接链接