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

Question

I want to build a expandable form when ever the someone enter text into input field. Example user fills the location a form expands below the input fields which asks for check-in/checkout dates.

or like in gmail when you enter the search string and click on the arrow it opens the advanced search form. I have attached a screen shot on the same.

Thanks in advance for the help.

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