<script type="text/javascript">
    var isShift = false;

    var seperator = "/";

    window.onload = function () {

        //Reference all INPUT elements in the Table.

        var inputs =  $(".date-format");

        //Loop through all INPUT elements.

        for (var i = 0; i < inputs.length; i++) {

            //Check whether the INPUT element is TextBox.

            if (inputs[i].type == "text") {



                //Check whether Date Format Validation is required.

                if (inputs[i].className.indexOf("date-format") != 1) {



                	var inputs =  $(".date-format");

                    //Set Max Length.

                    inputs[i].setAttribute("maxlength", 10);

                    //Only allow Numeric Keys.

                    inputs[i].onkeydown = function (e) {

                        return IsNumeric(this, e.keyCode);

                    };

                    //Validate Date as User types.

                    inputs[i].onkeyup = function (e) {

                        ValidateDateFormat(this, e.keyCode);

                    };

                }

            }

        }

    };



    function IsNumeric(input, keyCode) {

        if (keyCode == 16) {

            isShift = true;

        }

        //Allow only Numeric Keys.

        if (((keyCode >= 48 && keyCode <= 57) || keyCode == 8 || keyCode <= 37 || keyCode <= 39 || (keyCode >= 96 && keyCode <= 105)) && isShift == false) {

            if ((input.value.length == 2 || input.value.length == 5) && keyCode != 8) {

                input.value += seperator;

            }



            return true;

        }

        else {

            return false;

        }

    };



    function ValidateDateFormat(input, keyCode) {

        var dateString = input.value;

        if (keyCode == 16) {

            isShift = false;

        }

        //var regex = /(((0|1)[0-9]|2[0-9]|3[0-1])\/(0[1-9]|1[0-2])\/((19|20)\d\d))$/;
        
        var regex = /(0[0-9]|1[0-2])\/(((0|1)[0-9]|2[0-9]|3[0-1])\/((00|19|20)\d\d))$/;



        //Check whether valid dd/MM/yyyy Date Format.

        if (regex.test(dateString) || dateString.length == 0) {

            ShowHideError(input, "none");

        } else {

            ShowHideError(input, "block");

        }

    };



    function ShowHideError(textbox, display) {

        var row = textbox.parentNode.parentNode;

        var errorMsg = row.getElementsByTagName("span")[0];

        if (errorMsg != null) {

            errorMsg.style.display = display;
            errorMsg.setAttribute("status", display);

        }

    };

</script>

<footer class="footer-area border-top">

	<div class="container-fluid d-flex h-100">

		
	    <div class="row justify-content-end align-self-center w-100">

    <div class="container-fluid">
	     <form class="form-inline w-100" id="formAddRow"  >


	      <input type="hidden" name="rowId" id="rowId">

	      <input type="hidden" name="docId" id="docId">

	      <!--<label for="email">Title:</label>-->

	      <input name="title" id="title" onkeyup="var start = this.selectionStart; var end = this.selectionEnd; this.value = this.value.toUpperCase(); this.setSelectionRange(start, end); "  style="width:45%" type="text" class="form-control"  placeholder="Document Title">


	      <!--<label for="pwd">Date:</label>-->

	      <input type="text" class="form-control date-format" name="date" id="date" placeholder="Issue Date" style="width:115px" >

	      <span status="none" class="error" style="display: none">Invalid Date !!</span>


	      <!--<label for="pwd">Description:</label>-->

	      <input type="text" class="form-control" id="description" name="description" placeholder="Help Description"  style="width:27%" >
	      
	      
<script>
    $( function() 
    {
        var descriptionTags = ["Document Title Missing","Issue Date Missing","Doubt in Document Title","Doubt in Issue Date","Multipage Document"];
        function split( val ) {
           return val.split( / \s*/ );
        }
        function extractLast( term ) {
          return split( term ).pop();
        }
 
        $( "#description" )
        .on( "keydown", function( event ) 
        {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) 
            {
              event.preventDefault();
            }
        })
        .autocomplete(
        {
            minLength: 0,
            position:{  my: "left bottom", at: "left top"},
            source: function( request, response ) {
              // delegate back to autocomplete, but extract the last term
              response( $.ui.autocomplete.filter(
                descriptionTags, extractLast( request.term ) ) );
            },
            focus: function() {
              // prevent value inserted on focus
              return false;
            },
            select: function( event, ui ) {
       
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( " " );
                return false;
            }
        });
        
        var titleTags = ["PLUMBING", "DEMOLITION", "SPRINKLER", "FIRE ALARM", "DETAILS", "FLOOR", "PLAN", "ELECTRICAL", "MECHANICAL", "EAST", "WEST", "NORTH", "SOUTH", "ELEVATIONS", "PARTIAL", "ADDENDUM", "BULLETIN", "SUBMITTAL", "FINISH", "SCHEDULES", "SYMBOLS", "LIST", "ABBREVIATIONS", "LIGHTING", "POWER", "TEL/DATA", "REFLECTED", "CEILING", "EQUIPMENT", "INTERIOR", "EXTERIOR", "CONSTRUCTION", "SECTIONS", "SPECIFICATIONS", "PARTITION", "TYPES", "DOOR", "CELLAR", "SUB-CELLAR", "COVER SHEET", "TABLE OF CONTENTS", "POWER", "RISER", "BULKHEAD", "ROOF", "WALL", "FOUNDATION", "FRAMING", "COLUMN", "FIRST", "SECOND", "THIRD", "PROPOSED", "LEVEL", "GROUND", "INDEX", "LEGEND", "DEMO", "UPPER", "LOWER", "DIAGRAM", "SPECIFICATIONS", "HVAC", "DIMENSIONS", "TELECOMMUNICATIONS", "PROTECTION", "ARCHITECTURAL", "GENERAL", "NOTES", "TITLE", "OVERALL", "TYPICAL", "PHASE", "ACCESSORIES", "SECURITY", "DRAWING", "SITE", "LARGE", "SQUARE", "AROUND", "MATERIALS", "MARKET", "GRADING", "PLANTING", "FURNISHING", "STREETSCAPE", "ENLARGEMENT", "LAYOUT", "FURNISHING", "LARGE", "TOPPING", "EDGE", "SLAB", "UTILITY", "PANEL", "DISTRIBUTION", "TECHNOLOGY", "CONDUIT", "ROUTING", "ROOM", "PART", "DOMESTIC", "WATER", "STORM", "SANITARY", "IRRIGATION", "PIPING", "SCHEMATIC", "FEATURE", "BUILDERS", "PAVEMENT", "DESIGN", "DEVELOPMENT", "NARRATIVE", "DRAWING", "PROJECT", "DATA", "PROJECT", "NOTES", "FLOOD", "ZONE", "INFORMATION", "FIRESTOPPING", "PENETRATION", "EGRESS", "BUILDING", "CORRIDOR", "ENLARGED", "CONFERENCE", "MEDIUM", "MILLWORK"];
        $("#title")
        .on( "keydown", function( event ) 
        {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) 
            {
              event.preventDefault();
            }
        })
        .autocomplete(
        {
            minLength: 0,
            position:{  my: "left bottom", at: "left top"},
            source: function( request, response ) {
              // delegate back to autocomplete, but extract the last term
              response( $.ui.autocomplete.filter(
                titleTags, extractLast( request.term ) ) );
            },
            focus: function() {
              // prevent value inserted on focus
              return false;
            },
            select: function( event, ui ) 
            {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join(" ");
                return false;
            }
        });
    });
  </script>

	      <button type="button" id="submit_button" name="submit" class="btn btn-primary">Submit</button>

	    </form>
</div>
	    </div>

	  </div>

</footer>

</body>

</html>