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

我在做一个website。当你点击我的搜索框然后输入你点击搜索，然后它把你带到搜索结果的google.com如何在输入框架时使用ajax显示结果？当你在http://google.com上搜索你输入的文本通过其自我而不按搜索结果我怎么能做到这一点？这是我的html片段在我的网站上的Google自动搜索结果

<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我不知道如何开始行与它的代码ither所以请在深入解释

*侧面说明如果对不起网站看起来坏的IM 13

来源

2013-02-10 Jacob Anthony Tonna

不知道的JavaScript你很好，我建议先学习它。 w3schools.com将是一个好地方。

谷歌不再让你使用他们的网站通过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>

希望这有助于！

P.S.如果你想要一个iframe只在用户点击搜索框时弹出，那么在这里有一个：jsfiddle.net/4EDUK

来源

2013-02-10 04:02:30 Stephen

非常感谢我更新了它如何使iframe显示仅当文本框被点击？ – 2013-02-10 04:40:57

可能最简单的方法是这样做：http://jsfiddle.net/TqhCZ/ – Stephen 2013-02-10 04:55:39

哦，你可能会想提交你的网站到谷歌他们索引，它看起来不像他们已经。 http://www.google.com/webmasters/tools/submit-url – Stephen 2013-02-10 04:58:45

$(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); 
});

来源

2013-02-10 01:47:05 sajawikio

我怎么能在我的代码中使用这个，就像我上面说的那样，我不知道这是如何工作的，我只知道html css和php。我会在哪里放置它，以及我需要做些什么才能使其工作如何我需要 – 2013-02-10 01:49:57

请参阅我对您的重复问题的回复http://stackoverflow.com/questions/14793160/how-to-search-box-auto-搜索结果/ 14793216＃14793216 /。它包括所有HTML，CSS，jQuery，PHP等，你需要完成你所描述的内容。 – 2013-02-10 01:52:36

@htmled我删除那个问题，我使用了该网站，仍然无法弄清楚。 – 2013-02-10 01:54:41

如果你想在jQuery中定制一个自动完成，你可以使用一个像jQuery Autocomplete这样你会必须使用数组或远程文件定义自动完成值。

否则Google自定义搜索可让您通过搜索框使用Google提供的属性参数进行自动填充。这是一个网页，可以帮助你 - http://www.theblog.ca/autocomplete-google-custom-search-input-field

来源

2013-02-10 04:13:51

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

回答

相关问题