在輸入文本框中輸入一個字符並保存輸入後移至新頁面

Question

我想在我的網頁中實現類似於Google搜索頁面的內容。鏈接http://www.google.com顯示頁面中間的搜索字段，並鍵入一個字符，它將移動到頁面頂部並保存輸入的輸入。

將是巨大的，如果有人能證明實現這個使用jQuery/JavaScript的HTML或

Answer 1

我只是把一個小的腳本給你，要得到一個想法。在此過程中閱讀並閱讀jquery events。這應該讓你開始，http://jsfiddle.net/epinapala/uZ8xv/2/

順便說一句，Gogole沒有重定向你的即時搜索。 t移動divs，這個例子是一個非常微小的原型來演示相同的東西。

<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; 
}​ 

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

Answer 2

期運用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 example