1

私はウェブサイトを作っています。検索ボックスをクリックして入力すると、[検索]をクリックすると、検索結果が表示されたgoogle.comに移動します。入力時に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;
}

では、入力時にGoogle検索結果を表示するajaxフレームを作成するにはどうすればよいですか？ajaxについては何も知りません。それでコード行を開始する方法がわかりません。詳細に説明してください。

*ウェブサイトが悪いように見える場合は申し訳ありませんがサイドノート13

4

3 に答える 3

1

JavaScriptを知らなくても、かなり行き詰まっているので、最初にJavaScriptを学ぶことをお勧めします。w3schools.comは良い場所でしょう。

Googleではiframeを介してウェブサイトを使用できなくなったため、結果がgoogle.comから取得されるため、startpage.comを使用することをお勧めします。

私が考えることができる最も簡単な方法は、次のようなものです（この例では、より適切に埋め込まれているため、モバイル版のWebサイトを使用しています）。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>

お役に立てれば！

PSユーザーが検索ボックスをクリックしたときにのみiframeがポップアップするものが必要な場合は、jsfiddle.net/4EDUKにあります。

于 2013-02-10T04:02:30.207 に答える
0

jQueryでカスタムオートコンプリートが必要な場合は、配列またはリモートファイルを使用してオートコンプリート値を定義する必要があるjQueryオートコンプリートのようなものを使用できます。

それ以外の場合、Googleカスタム検索では、Googleが提供する属性パラメータを使用して検索ボックスからオートコンプリートを使用できます。これがあなたを助けるウェブページです-http ://www.theblog.ca/autocomplete-google-custom-search-input-field

于 2013-02-10T04:13:51.697 に答える
0 
$(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-10T01:47:05.083 に答える