Link to home
Start Free TrialLog in
Avatar of pamela rizk
pamela rizkFlag for Lebanon

asked on

javascript create textbox asp

how to create asp:TextBox programatically in javascript!!!!
Avatar of pamela rizk
pamela rizk
Flag of Lebanon image

ASKER

any newssss
Avatar of Julian Hansen
an asp:textbox - is just an <input> element
You can do it like this
HTML
    <form action="reflect.php" method="post">
      <p>New inputs will appear below when you click this button <button id="add" class="btn btn-primary">Add</button></p>
      <div id="inputs"></div>
      <button type="submit" class="btn btn-default">Submit</button>
	</form>

Open in new window

JQuery
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function() {
  $('#add').click(function(e) {
    // PREVENT DEFAULT BUTTON BEHAVIOUR (submit)
    e.preventDefault();

    //FIND OUT HOW MANY input's WE HAVE ALREADY
    var next = $('form input').length + 1;

    // CREATE UNIQUE NAME AND ID
    var name = 'input_' + next;

    // CREATE THE NEW INPUT WITH name AND id
    var newinp = $('<input/>').attr({'name':name, 'id' : name});

    // APPEND THE NEW INPUT TO THE inputs <div> INSIDE 
    // ITS OWN <div> SO EACH APPEARS ON ITS OWN LINE
    $('#inputs').append(
      $('<div/>').append(newinp)
    );

    // SET FOCUS TO NEW input
    newinp.focus();
  });
});
</script>

Open in new window

Working sample here
can i attach a autocomplete event for it??
Yes - you can

Add just before the last line
newinp.autocomplete({
   /* your options here */
});
newinp.focus();

Open in new window

woudl you pleae give me an exampl ebecause i am trying teh below but it is not working
txt.autocomplete({
                    //Begin on source
                    source: function (request, response) {
                   <%--   var m_Category = $("#<%=hdn_Category_File.ClientID%>").val();
                     var m_SubCategory = $("#<%=hdn_SubCategory_File.ClientID%>").val();
                    var m_SessionId = $("#<%=hdn_SessionID_File.ClientID%>").val();
                    var m_CongrpStr = $("#<%=hdn_ConGrpStr_File.ClientID%>").val();
                    var m_TransFilePathName = $("#<%=hdn_trans_File.ClientID%>").val();
                      var m_txtSearch_File = txt.value;//added by serena
                    var searchFor;
                    searchFor = CodifyPrefix(m_txtSearch_File);
                    $.ajax({
                        url: '<%=ResolveUrl("AutoCompleteForFile.asmx/RetrieveFileData")%>',
                        data: "{ 'prefixText': '" + searchFor + "' , 'm_Category': '" + m_Category + "','m_SubCategory':'" + m_SubCategory + "','m_SessionId': '" + m_SessionId + "', 'm_ConGrpStr': '" + m_CongrpStr + "', 'm_TransFilePathName': '" + m_TransFilePathName + "'}",
                        dataType: "json",
                        delay: 0,
                        autoFocus: true,
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('|')[0],//show key
                                    FileNumber: item.split('|')[1], //filenumber 
                                    FileName: item.split('|')[2], //File Name
                                    FileNat: item.split('|')[3], //File Nat
                                    FileLink: item.split('|')[4],//FileLink
                                    FileLinkMsg: item.split('|')[5] //FileLinkMsg
                                }
                            }))
                        }//end on Success
                        ,
                        error: function (response) {
                            txt.attr("style", "border: solid 1px red;");
                            alert(response.responseText);
                        },//end on Error
                        failure: function (response) {
                            alert(response.responseText);
                        }//End on failure
                    });//End $.Ajax --%>
                }//end source
                });//end autocomplete

Open in new window

i am removing the autocomplete text from javascript than i am adding it again
that is why i need to redefine teh autocomplete method but i couldn't .any help
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
below is my whole code

please helpp i am stuckk
<script type="text/javascript">
    //Begin document is ready
    $(document).ready(function () {
        $('#<%=txtSearch_File.ClientID%>').attr('autocomplete', 'on');
        
        var selectedItems = { FileNat: '0', FileNumber: '0', FileName: '0' };
        var elems = [];
        EndRequestHandler();
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        //Begin EndRequestHandler
        function EndRequestHandler(sender, args) {
            $("#<%=TrucButton.ClientID%>").hide();
            $("#<%=txtSearch_File.ClientID%>").autocomplete({
                //Begin on source
                source: function (request, response) {
                    var m_Category = $("#<%=hdn_Category_File.ClientID%>").val();
                    var m_SubCategory = $("#<%=hdn_SubCategory_File.ClientID%>").val();
                    var m_SessionId = $("#<%=hdn_SessionID_File.ClientID%>").val();
                    var m_CongrpStr = $("#<%=hdn_ConGrpStr_File.ClientID%>").val();
                    var m_TransFilePathName = $("#<%=hdn_trans_File.ClientID%>").val();
                    var m_txtSearch_File = $("#<%=txtSearch_File.ClientID%>").val();//added by serena
                    var searchFor;
                    searchFor = CodifyPrefix(m_txtSearch_File);
                    $.ajax({
                        url: '<%=ResolveUrl("AutoCompleteForFile.asmx/RetrieveFileData")%>',
                        data: "{ 'prefixText': '" + searchFor + "' , 'm_Category': '" + m_Category + "','m_SubCategory':'" + m_SubCategory + "','m_SessionId': '" + m_SessionId + "', 'm_ConGrpStr': '" + m_CongrpStr + "', 'm_TransFilePathName': '" + m_TransFilePathName + "'}",
                        dataType: "json",
                        delay: 0,
                        autoFocus: true,
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('|')[0],//show key
                                    FileNumber: item.split('|')[1], //filenumber 
                                    FileName: item.split('|')[2], //File Name
                                    FileNat: item.split('|')[3], //File Nat
                                    FileLink: item.split('|')[4],//FileLink
                                    FileLinkMsg: item.split('|')[5] //FileLinkMsg
                                }
                            }))
                        }//end on Success
                        ,
                        error: function (response) {
                            $('#<%= txtSearch_File.ClientID%>').attr("style", "border: solid 1px red;");
                            alert(response.responseText);
                        },//end on Error
                        failure: function (response) {
                            alert(response.responseText);
                        }//End on failure
                    });//End $.Ajax
                },//end on Source
                focus: function () {
                    // prevent value inserted on focus
                    return false;
                },//end on Focus
                closeOnSelect: true,
                //end on source
                //Begin on select
                select: function (e, i) {
                    var m_AllowMultipleSelection = $("#<%=hdn_AllowMultipleSelection.ClientID%>").val();
                    if (m_AllowMultipleSelection == "1") {

                        //  
                        //selectedItems[FileName] = i.item.FileName.trim();
                        elems.push(i.item.FileName.trim());
                        var text = this.value.split(/,\s*/);
                        text.pop();// \sremove the current input
                        text.push(i.item.FileName.trim());// add the selected item
                        text.push("");  // add placeholder to get the comma-and-space at the end
                        this.value = text.join(", ");


                        var value0 = $("#<%=hdn_FileName_list.ClientID%>").val().split(/,\s*/);
                        value0.pop();
                        value0.push(i.item.FileName.trim());
                        value0.push("");
                        $("#<%=hdn_FileName_list.ClientID%>").val(value0.join(", "));

                        //selectedItems[FileNumber] = i.item.FileNumber.trim();
                        elems.push(i.item.FileNumber);
                        var value = $("#<%=Hdn_Number_File_List.ClientID%>").val().split(/,\s*/);
                        value.pop();
                        value.push(i.item.FileNumber);
                        value.push("");
                        $("#<%=Hdn_Number_File_List.ClientID%>").val(value.join(", "));

                        //selectedItems[FileNat] = i.item.FileNat.trim();
                        elems.push(i.item.FileNat);
                        var value1 = $("#<%=hdn_Filecat_list.ClientID%>").val().split(/,\s*/);
                        value1.pop();
                        value1.push(i.item.FileNat);
                        value1.push("");
                        $("#<%=hdn_Filecat_list.ClientID%>").val(value1.join(", "));

                        //$("#<%=hdn_array.ClientID%>").val(JSON.stringify(selectedItems));

                        //var myArray = $("#<%=txtSearch_File.ClientID%>")[0].value;//.split(",");

                        var myArray1 = $("#<%=txtSearch_File.ClientID%>")[0].value.split(",");

                        //remove empty array node
                        myArray1.pop();
                       
                        //remove empty array node
                        //myArray.pop();
                        //$("#<%=hdn_array.ClientID%>").val(JSON.stringify(myArray1));
                        <%-- elems.push(i.item.FileNat);
                        elems.push(i.item.FileNumber);
                        elems.push(i.item.FileName.trim());
                        $("#<%=hdn_array.ClientID%>").val(JSON.stringify(elems)); //store array--%>

                    }//End allow multiple selection 
                    else {
                        $("#<%=Hdn_Number_File.ClientID%>").val(i.item.FileNumber);
                        $("#<%=txtSearch_File.ClientID%>").val(i.item.FileName.trim());
                        $("#<%=hdn_Filecat.ClientID%>").val(i.item.FileNat);
                        if (i.item.FileName.trim() == "") {
                            $("#<%=Hdn_Number_File.ClientID%>").val("0");
                            $("#<%=txtSearch_File.ClientID%>").val("");
                        }
                        var m_OpenMode = $("#<%=hdn_OpenFile.ClientID%>").val();
                        $("#<%=TrucButton.ClientID%>").hide();
                        if (m_OpenMode == "1") {
                            $("#<%=TrucButton.ClientID%>").click();
                        }
                        $("#<%=TrucButton.ClientID%>").hide();

                    } //end allow simple selection 

                    appendColumn(i.item.FileNat, i.item.FileNumber, i.item.FileName.trim(), i.item.FileLink.trim(), i.item.FileLinkMsg.trim());//Adding Column that contains the link and delete icon
                    RemoveValueFromAutoCompleteSearch(i.item.FileNat, i.item.FileNumber, i.item.FileName.trim());
                    return false;
                }, //end on select

                minLength: 1,
                //CHAHID ON 4-1-2016
                //begin change event that work whenever we exit the autocomlpete
                change: function (event, ui) {
                    var m_AllowMultipleSelection = $("#<%=hdn_AllowMultipleSelection.ClientID%>").val();
                    //if (m_AllowMultipleSelection == "0") {
                    $("#<%=hdn_key_pressed.ClientID%>").val(event.keyCode);
                    var keypressed = $("#<%=hdn_key_pressed.ClientID%>").val();
                    if (keypressed != 13) {
                        //if (!ui.item) {
                        var x = $("#<%=txtSearch_File.ClientID%>").val();
                        var m_Category = $("#<%=hdn_Category_File.ClientID%>").val();
                        var m_ConSocStr = $("#<%=hdn_ConSocStr_File.ClientID%>").val();
                        var m_SubCategory = $("#<%=hdn_SubCategory_File.ClientID%>").val();
                        $.ajax({
                            url: '<%=ResolveUrl("AutoCompleteForFile.asmx/CheckForFileExistance")%>',
                            data: "{ 'prefixText': '" + x + "' , 'm_Category': '" + m_Category + "','m_ConSocStr': '" + m_ConSocStr + "' , 'm_SubCategory': '" + m_SubCategory + "'}",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success:
                                function DecodifyFileOnSuccess(data) {
                                    var json = JSON.stringify(data);
                                    obj = JSON.parse(json);
                                    if (obj.d == "2") { // if it is empty
                                        if (m_AllowMultipleSelection == "0") {
                                            $("#<%=txtSearch_File.ClientID%>").val("");
                                            $("#<%=Hdn_Number_File.ClientID%>").val("0");
                                        } else {
                                            $("#<%=txtSearch_File.ClientID%>").val("");
                                            $("#<%=txtSearch_File.ClientID%>").focus();
                                        }

                                    } else {
                                        if (obj.d.split('|')[0] == "1") {

                                            //Number exist;data is valid CHAHID ON 4-1-2016
                                            var FileNat = obj.d.split('|')[3];
                                            var FileNum = obj.d.split('|')[2];
                                            var FileName = obj.d.split('|')[1].trim();
                                            var FileLink = '';
                                            var FileLinkMsg = '';
                                            if (m_AllowMultipleSelection == "0") {
                                                $("#<%=txtSearch_File.ClientID%>").val(FileName);
                                                $("#<%=Hdn_Number_File.ClientID%>").val(FileNum);
                                                $("#<%=hdn_Filecat.ClientID%>").val(FileNat);
                                                //added by chahid 5/7/2016 in order to open the file after select
                                                var m_OpenMode = $("#<%=hdn_OpenFile.ClientID%>").val();
                                                $("#<%=TrucButton.ClientID%>").hide();
                                                if (m_OpenMode == "1") {
                                                    $("#<%=TrucButton.ClientID%>").click();

                                                }
                                            } else {


                                                var value0 = $("#<%=hdn_FileName_list.ClientID%>").val().split(/,\s*/);
                                                value0.pop();
                                                value0.push(FileName);
                                                value0.push("");
                                                $("#<%=hdn_FileName_list.ClientID%>").val(value0.join(", "));

                                                var value = $("#<%=Hdn_Number_File_List.ClientID%>").val().split(/,\s*/);
                                                value.pop();
                                                value.push(FileNum);
                                                value.push("");
                                                $("#<%=Hdn_Number_File_List.ClientID%>").val(value.join(", "));

                                                var value1 = $("#<%=hdn_Filecat_list.ClientID%>").val().split(/,\s*/);
                                                value1.pop();
                                                value1.push(FileNat);
                                                value1.push("");
                                                $("#<%=hdn_Filecat_list.ClientID%>").val(value1.join(", "));

                                            }

                                            $("#<%=TrucButton.ClientID%>").hide();
                                            //end added by chahid 5/7/2016 in order to open the file after select
                                            return false;
                                        } else {
                                            var m_ValidateExistence = $("#<%=hdn_ValidateExistence.ClientID%>").val();
                                            if (m_ValidateExistence == "1") { //for validation
                                                alert("Invalid input");
                                                if (m_AllowMultipleSelection == "0") {
                                                    $("#<%=txtSearch_File.ClientID%>").val("");
                                                    $("#<%=txtSearch_File.ClientID%>").focus();
                                                    $("#<%=Hdn_Number_File.ClientID%>").val("0");
                                                } else {
                                                    $("#<%=txtSearch_File.ClientID%>").val("");
                                                    $("#<%=txtSearch_File.ClientID%>").focus();
                                                }


                                            } else {//for non validation
                                                if (m_AllowMultipleSelection == "0") {
                                                    $("#<%=Hdn_Number_File.ClientID%>").val("0");
                                                    //added by chahid 5/7/2016 in order to open the file after select
                                                    var m_OpenMode = $("#<%=hdn_OpenFile.ClientID%>").val();
                                                    $("#<%=TrucButton.ClientID%>").hide();
                                                    if (m_OpenMode == "1") {
                                                        $("#<%=TrucButton.ClientID%>").click();
                                                    }
                                                }
                                                else {
                                                    $("#<%=Hdn_Number_File_List.ClientID%>").val("0");
                                                }
                                                $("#<%=TrucButton.ClientID%>").hide();
                                                //end added by chahid 5/7/2016 in order to open the file after select
                                            }//end else

                                        }//end else
                                    }//end else
                                }//end DecodifyFileOnSuccess
                                    ,//end on sucess
                            error: function (response) {
                                $('#<%= txtSearch_File.ClientID%>').attr("style", "border: solid 1px red;");
                                alert(response.responseText);
                            },//end on error
                            failure: function (response) {
                                alert(response.responseText);
                            }//end on failure
                        });//end $.ajax
                            $("#<%=txtSearch_File.ClientID%>").autocomplete('close');
                        //}//end if (!ui.item)
                    }//end if (keypressed != 13)
                    //}//end if m_AllowMultipleSelection

                },//end on change
                //CHAHID ON 4-1-2016
                autoFocus: true //IF TRUE IT WILL SELECT THE FIRST ROW BY DEFAULT
            })//end $("#<%=txtSearch_File.ClientID%>").autocomplete(

                //key press event to handle enter pressed added by chahid on 12-jan-2016
                .keypress(function (e) {
                    var m_AllowMultipleSelection = $("#<%=hdn_AllowMultipleSelection.ClientID%>").val();
                    //if (m_AllowMultipleSelection == "0") {
                    $("#<%=hdn_key_pressed.ClientID%>").val(e.keyCode);
                    if (e.keyCode == 13) {

                        var x = $("#<%=txtSearch_File.ClientID%>").val();
                        var m_Category = $("#<%=hdn_Category_File.ClientID%>").val();
                        var m_ConSocStr = $("#<%=hdn_ConSocStr_File.ClientID%>").val();
                        var m_SubCategory = $("#<%=hdn_SubCategory_File.ClientID%>").val();
                        //commented by chahid on 5/7/2016 tokeep the text when validation mode is off
                        $.ajax({
                            url: '<%=ResolveUrl("AutoCompleteForFile.asmx/CheckForFileExistance")%>',
                            data: "{ 'prefixText': '" + x + "' , 'm_Category': '" + m_Category + "','m_ConSocStr': '" + m_ConSocStr + "' , 'm_SubCategory': '" + m_SubCategory + "'}",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success: function DecodifyFileOnSuccess(data) {

                                var json = JSON.stringify(data);
                                obj = JSON.parse(json);

                                if (obj.d == "2") { // if it is empty
                                    if (m_AllowMultipleSelection == "0") {
                                        $("#<%=txtSearch_File.ClientID%>").val("");
                                        $("#<%=Hdn_Number_File.ClientID%>").val("0");
                                    } else {
                                        $("#<%=txtSearch_File.ClientID%>").val("");
                                        $("#<%=txtSearch_File.ClientID%>").focus();

                                    }

                                } else {
                                    if (obj.d.split('|')[0] == "1") {

                                        //Number exist;data is valid CHAHID ON 4-1-2016
                                        var FileNat = obj.d.split('|')[3];
                                        var FileNum = obj.d.split('|')[2];
                                        var FileName = obj.d.split('|')[1].trim();
                                        var FileLink = '';
                                        var FileLinkMsg = '';

                                        if (m_AllowMultipleSelection == "0") {
                                            $("#<%=txtSearch_File.ClientID%>").val(FileName);
                                            $("#<%=Hdn_Number_File.ClientID%>").val(FileNum);
                                            $("#<%=hdn_Filecat.ClientID%>").val(FileNat);
                                            //added by chahid 5/7/2016 in order to open the file after select
                                            var m_OpenMode = $("#<%=hdn_OpenFile.ClientID%>").val();
                                            $("#<%=TrucButton.ClientID%>").hide();
                                            if (m_OpenMode == "1") {
                                                $("#<%=TrucButton.ClientID%>").click();

                                            }
                                        } else {
                                            var value0 = $("#<%=hdn_FileName_list.ClientID%>").val().split(/,\s*/);
                                            value0.pop();
                                            value0.push(FileName);
                                            value0.push("");
                                            $("#<%=hdn_FileName_list.ClientID%>").val(value0.join(", "));

                                            var value = $("#<%=Hdn_Number_File_List.ClientID%>").val().split(/,\s*/);
                                            value.pop();
                                            value.push(FileNum);
                                            value.push("");
                                            $("#<%=Hdn_Number_File_List.ClientID%>").val(value.join(", "));

                                            var value1 = $("#<%=hdn_Filecat_list.ClientID%>").val().split(/,\s*/);
                                            value1.pop();
                                            value1.push(FileNat);
                                            value1.push("");
                                            $("#<%=hdn_Filecat_list.ClientID%>").val(value1.join(", "));

                                            appendColumn(FileNat, FileNum, FileName, FileLink, FileLinkMsg);//Adding Column that contains the link and delete icon
                                            $("#<%=txtSearch_File.ClientID%>").val("");
                                        }

                                        $("#<%=TrucButton.ClientID%>").hide();
                                        //end added by chahid 5/7/2016 in order to open the file after select
                                        return false;
                                    } else {
                                        var m_ValidateExistence = $("#<%=hdn_ValidateExistence.ClientID%>").val();
                                        if (m_ValidateExistence == "1") { //for validation
                                            alert("Invalid input");
                                            if (m_AllowMultipleSelection == "0") {
                                                $("#<%=txtSearch_File.ClientID%>").val("");
                                                $("#<%=txtSearch_File.ClientID%>").focus();
                                                $("#<%=Hdn_Number_File.ClientID%>").val("0");
                                            } else {
                                                $("#<%=txtSearch_File.ClientID%>").val("");
                                                $("#<%=txtSearch_File.ClientID%>").focus();
                                            }


                                        } else {//for non validation
                                            if (m_AllowMultipleSelection == "0") {
                                                $("#<%=Hdn_Number_File.ClientID%>").val("0");
                                                //added by chahid 5/7/2016 in order to open the file after select
                                                var m_OpenMode = $("#<%=hdn_OpenFile.ClientID%>").val();
                                                $("#<%=TrucButton.ClientID%>").hide();
                                                if (m_OpenMode == "1") {
                                                    $("#<%=TrucButton.ClientID%>").click();
                                                }
                                            }
                                            else {
                                                $("#<%=Hdn_Number_File_List.ClientID%>").val("0");
                                            }
                                            $("#<%=TrucButton.ClientID%>").hide();
                                            //end added by chahid 5/7/2016 in order to open the file after select
                                        }//end else

                                    }//end else
                                }//end else
                            }//end DecodifyFileOnSuccess
                            ,//end on sucess
                            error: function (response) {
                                $('#<%= txtSearch_File.ClientID%>').attr("style", "border: solid 1px red;");
                                alert(response.responseText);
                            },//end on error
                            failure: function (response) {
                                alert(response.responseText);
                            }//end on failure
                        }); //end $.ajax({
                            $("#<%=txtSearch_File.ClientID%>").autocomplete('close');
                    }//end e.keyCodes event to handle enter pressed added by chahid on 12-jan-2016 
                    //}//end if m_AllowMultipleSelection =0

                })//end .keypress(
            //hilight the data

            .data("ui-autocomplete")._renderItem = function (ul, item) {
                var $a = $("<a></a>").text(item.label);
                highlightText(this.term, $a);
                return $("<li></li>").append($a).appendTo(ul);
            }//end hilight the data 


            //function that hilight the text typed 
                function highlightText(text, $node) {
                    var searchText = $.trim(text).toLowerCase(), currentNode = $node.get(0).firstChild, matchIndex, newTextNode, newSpanNode;
                    while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {
                        newTextNode = currentNode.splitText(matchIndex);
                        currentNode = newTextNode.splitText(searchText.length);
                        newSpanNode = document.createElement("span");
                        newSpanNode.className = "highlight";
                        currentNode.parentNode.insertBefore(newSpanNode, currentNode);
                        newSpanNode.appendChild(newTextNode);
                    }
                }


            //end functionhilight


            // Hide table columns with index greater then 0
                function HideColumn(div, FileNat, FileNumber, FileName) {
                    div.style.display = "none";
                var m_Number_File_List = $("#<%=Hdn_Number_File_List.ClientID%>").val();//added by serena
                    m_Number_File_List = m_Number_File_List.replace(FileNumber.concat(", "), '');
                    $("#<%=Hdn_Number_File_List.ClientID%>").val(m_Number_File_List);


                var m_Filecat_list = $("#<%=hdn_Filecat_list.ClientID%>").val();//added by serena
                    m_Filecat_list = m_Filecat_list.replace(FileNat.concat(", "), '');
                    $("#<%=hdn_Filecat_list.ClientID%>").val(m_Filecat_list);


                var m_FileName_list = $("#<%=hdn_FileName_list.ClientID%>").val();//added by serena
                    m_FileName_list = m_FileName_list.replace(FileName.concat(", "), '');
                    $("#<%=hdn_FileName_list.ClientID%>").val(m_FileName_list);

            }

            function RemoveValueFromAutoCompleteSearch(FileNat, FileNumber, FileName) {
                var m_txtSearch_File = $("#<%=txtSearch_File.ClientID%>").val();//added by
                m_txtSearch_File = m_txtSearch_File.replace(FileName.concat(", "), '');
                $("#<%=txtSearch_File.ClientID%>").val(m_txtSearch_File);

            }
            function Success(result) {
                alert(result);
            }
            function Failure(error) {
                alert(error);
            }
           
            // append column to the HTML table
            function appendColumn(FileNat, FileNumber, FileName, FileLink, FileLinkMsg) {
                $("#<%=txtSearch_File.ClientID%>").remove();
                var Pnl_Dyntables = document.getElementById('<%= Pnl_tables.ClientID%>');// Pnl_tables reference
                var Createddiv = document.createElement('div'); // create DIV element with below styles :style = "display: inline-block ; white-space: nowrap;"
                Createddiv.style.display = "inline-block";
                Createddiv.style.whiteSpace = "nowrap";
                Createddiv.style.setProperty('float', 'left');
                Createddiv.style.cssFloat = "left";

             

                // Create table.
                var createdtable = document.createElement('table');
                // Insert New Row for table at index '0'.
                var row1 = createdtable.insertRow(0);
                // Insert New Column for Row1 at index '0'.
                var row1col1 = row1.insertCell(0);
                var CellNbre = createdtable.rows[0].cells.length;
                var File_Link = document.createElement('a');
                File_Link.href = FileLink;
                File_Link.setAttribute('target', '_blank');
                File_Link.style.color = 'black';
                var m_FileName = FileName.replace(/\s+/g, '');
                File_Link.text = m_FileName;

                row1col1.setAttribute('width', 'auto');
                row1col1.setAttribute('height', '22px');
                row1col1.setAttribute('white-space', 'nowrap');
                row1col1.setAttribute('class', 'textBoxStylerounded');
                row1col1.style.border = "solid 0px";
                row1col1.style.backgroundColor = "#ECF5FF";
                row1col1.setAttribute('text-align', 'center');

                var img = document.createElement('img');
                img.src = "../../Images/NewIcons/deleteline_Dis_Icon.png";
                img.setAttribute('width', '15px');
                img.setAttribute('height', '15px');
                img.setAttribute('display', 'inline');
                img.setAttribute('vertical-align', 'middle');
                img.style.cursor = "pointer";

                img.onclick = function () {
                    HideColumn(Createddiv, FileNat, FileNumber, FileName);
                };
                row1col1.appendChild(File_Link);    // append text node to the DIV
                row1col1.appendChild(img); // append text node to the DIV

                Createddiv.appendChild(createdtable);// append DIV to the table cell
                var txt = document.createElement("input");
                txt.id = 'txtSearch_File';
                txt.setAttribute('type', 'text');
                txt.setAttribute('name', 'txtSearch_File');
                txt.setAttribute('Height', '22px');
                txt.setAttribute('Width', '600px');
                txt.setAttribute('CssClass', 'textBoxStylerounded');
                txt.placeholder = 'Click Here';
                txt.style.cursor = 'pointer';
                txt.autocomplete = 'on';
                txt.setAttribute('autocomplete', 'on');
                txt.setAttribute('font-family', 'Calibri');
                txt.setAttribute('font-size', '10pt');
                txt.setAttribute('color', 'navy');
                txt.setAttribute('margin-left', '0px');
                txt.setAttribute('margin-top', '0px');
                txt.setAttribute('border-style', 'none');
               // txt.autocomplete({

                    //Begin on source
                   <%-- source: function (request, response) {
                      var m_Category = $("#<%=hdn_Category_File.ClientID%>").val();
                     var m_SubCategory = $("#<%=hdn_SubCategory_File.ClientID%>").val();
                    var m_SessionId = $("#<%=hdn_SessionID_File.ClientID%>").val();
                    var m_CongrpStr = $("#<%=hdn_ConGrpStr_File.ClientID%>").val();
                    var m_TransFilePathName = $("#<%=hdn_trans_File.ClientID%>").val();
                      var m_txtSearch_File = txt.value;//added by serena
                    var searchFor;
                    searchFor = CodifyPrefix(m_txtSearch_File);
                    $.ajax({
                        url: '<%=ResolveUrl("AutoCompleteForFile.asmx/RetrieveFileData")%>',
                        data: "{ 'prefixText': '" + searchFor + "' , 'm_Category': '" + m_Category + "','m_SubCategory':'" + m_SubCategory + "','m_SessionId': '" + m_SessionId + "', 'm_ConGrpStr': '" + m_CongrpStr + "', 'm_TransFilePathName': '" + m_TransFilePathName + "'}",
                        dataType: "json",
                        delay: 0,
                        autoFocus: true,
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('|')[0],//show key
                                    FileNumber: item.split('|')[1], //filenumber 
                                    FileName: item.split('|')[2], //File Name
                                    FileNat: item.split('|')[3], //File Nat
                                    FileLink: item.split('|')[4],//FileLink
                                    FileLinkMsg: item.split('|')[5] //FileLinkMsg
                                }
                            }))
                        }//end on Success
                        ,
                        error: function (response) {
                            txt.attr("style", "border: solid 1px red;");
                            alert(response.responseText);
                        },//end on Error
                        failure: function (response) {
                            alert(response.responseText);
                        }//End on failure
                    });//End $.Ajax 
                }//end source--%>
                //});//end autocomplete
               // txt.focus();
                
                
                Pnl_Dyntables.appendChild(Createddiv);// append DIV to the table cell
                Pnl_Dyntables.appendChild(txt);// append DIV to the table cell
            }//End append Function
            }//end EndRequestHandler
    });//end $(document).ready(function ()
   
</script>

                    <asp:Panel ID="Pnl_tables"  runat="server" Height="100%" Width="100%" ScrollBars="Auto">
                 
 
          
        <asp:TextBox ID="txtSearch_File" runat="server" Height="22px"
        CssClass="textBoxStylerounded" Width="100px" autocomplete="on" 
        Style="cursor: pointer;" onkeyDown="AdjustWidth(this);" onKeyUp="AdjustWidth(this);"
        placeholder="Click Here"></asp:TextBox>
           
       <asp:Label ID="lbl_mandatory" runat="server" Text="*" ForeColor="Red" Visible="false"></asp:Label>
        <asp:ImageButton ID="btn_search" runat="server" Width="20px" Height="20px"
        ImageUrl="~/Images/Find-en-ico.png" TabIndex="-1" Style="vertical-align: middle; padding-top: 0.5%; padding-bottom: 0.5%"
        CausesValidation="false" Visible="false" />
           
      </asp:Panel>
               
<asp:HiddenField ID="hdn_Category_File" runat="server" />
<asp:HiddenField ID="hdn_SubCategory_File" runat="server" />

<asp:HiddenField ID="hdn_SessionID_File" runat="server" />
<asp:HiddenField ID="hdn_ConGrpStr_File" runat="server" />
<asp:HiddenField ID="hdn_ConSocStr_File" runat="server" />
<asp:HiddenField ID="Hdn_Number_File" runat="server" />

<asp:HiddenField ID="Hdn_Number_File_List" runat="server" />
<asp:HiddenField ID="hdn_Filecat" runat="server" />
<asp:HiddenField ID="hdn_Filecat_list" runat="server" />
<asp:HiddenField ID="hdn_FileName_list" runat="server" />

<asp:HiddenField ID="hdn_OpenFile" runat="server" />
<asp:HiddenField ID="hdn_ValidateExistence" runat="server" />
<asp:HiddenField ID="hdn_key_pressed" runat="server" />
<asp:HiddenField ID="hdn_AllowMultipleSelection" runat="server" />
<asp:HiddenField ID="hdn_trans_File" runat="server" />
<asp:HiddenField ID="hdn_array" runat="server" />


<asp:Button ID="TrucButton"
    runat="server"
    Text="" BorderStyle="None"
    BackColor="Transparent"
    CausesValidation="false" />

Open in new window

What is this code trying to do - it seems extremely involved - can you describe what you are trying to achieve.

Also, can you show me where in your code you are trying to dynamically create a text box.
dear  mr julian
thnak you i changed the concept
I don't understand?
ok