0

私は自分のウェブページにグーグル検索ページに似たものを実装したいと思います。リンクhttp://www.google.comは、ページの中央に検索フィールドを表示し、文字を入力すると、入力された入力を保持してページの上部に移動します。

誰かがjquery/javascriptまたはhtmlを使用してこれを達成することを実証できれば素晴らしいでしょう

4

2 に答える 2

2

アイデアを得るために、あなたのために小さなスクリプトを作成しました。それに取り組んで、この過程でjqueryイベントを読んでください。これで始められるはずです、http：//jsfiddle.net/epinapala/uZ8xv/2/

ところで、Gogoleはインスタント検索であなたをリダイレクトしません。tはdivを移動します。この例は、同じことを示すための非常に小さなプロトタイプです。

<div class="block">
    <input id="ip" type="text" />
    <div class="res">NULL</div>
</div>  

div {
  position:absolute;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
  top:100px;
}​

</ p> 

var d = false;

$("#ip").keyup(function(){
    if(d ==false){
    $(".block").animate({"top": "-=50px"});
        d= true;
    }
    var v =$(this).val();
    $(".res").html("Search results for " + v );
});

</ p>

于 2012-06-25T23:40:05.907 に答える
0

の使用keypressとappendTo 

<div style="height:30px;" id="divMain">
    Move entire form below here on search
</div>
<br />
<div style="height:90px;" id="divOther">
<br />Some text...
<form id="frmSubmit">  
  Search: <input type="text" id="txtSearch" /><br />
  <input type="submit" value="Submit" />
</form>
</div>

jQuery：

$("#txtSearch").keypress(function() {
    $("#frmSubmit").appendTo("#divMain");
    $('#txtSearch').focus();
});​

最後の：

jsFiddleの例

于 2012-06-25T23:43:39.457 に答える