輸入文本字段更改時的動態可擴展形式

Question

每當有人在輸入字段中輸入文本時，我都想構建一個可擴展的表單。 示例用戶填寫表格在輸入字段下方擴展的位置，該字段要求輸入入住/退房日期。

或類似gmail，當您輸入搜索字符串並單擊箭頭時，它會打開高級搜索表單。 我已經附上了相同的屏幕截圖。

先謝謝您的幫助。

Answer 1

HTML：

<input id="geocomplete"  style="width:200px;" type="text" placeholder="Type in an address" size="90" autocomplete="on">    

<div id="checkInOutDiv" class="hiddenDiv">
    <input id="checkInDate" type="text" />
    <input id="checkOutDate" type="text" />    
</div>
</form>

CSS：

.hiddenDiv {
    display:none;
}

JavaScript：

 $(document).ready(function(){
        var defaultAddrText = $("#geocomplete").attr("placeholder");
        $("#geocomplete").keydown(function(){//could be 'onchange' instead
            var addr = $(this).val();
            if( addr != '' && addr != defaultAddrText ){
                $("#checkInOutDiv").removeClass("hiddenDiv");    
            }else{
                $("#checkInOutDiv").addClass("hiddenDiv");
            }
        });
    });