输入文本字段更改时的动态可扩展形式

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